提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

css五块效果图

CSS 效果图
2023-09-11 14:19:16 时间

 html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="01style.css">
</head>
<body>
    <a class="a1">链接1</a>
    <a class="a2">链接2</a>
    <a class="a3">链接3</a>
    <a class="a4">链接4</a>
    <a class="a5">链接5</a>
</body>
</html>

01style.css

body{
    margin: 0 auto;
    border: 2px solid red;
    height: 300px;
    width: 300px;
    padding: 10px;
}
a{
    display: block;        /*转为块级元素*/
    text-decoration: none;   /*清除下划线*/
    text-align: center;
    height: 100px;
    width: 100px;
    background: rosybrown;
    font-weight: bold;
    line-height: 100px;      /*字体高度，居中*/
    color: white;
}

a:hover{
    background: #4158D0;
}
.a2,.a4{
    position: relative;  /*相对定位*/
    top: -100px;
    right: -200px;
}
.a5{
    position: relative;
    top: -300px;
    right: -100px;
}

效果：

 

相关文章