css五块效果图

林代码er

于 2022-12-19 23:13:46 发布

阅读量87

点赞数

分类专栏： linercss 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_71088505/article/details/128378765

版权

CSS 布局链接样式相对定位背景颜色

关键词由CSDN通过智能技术生成

linercss 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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;
}

效果：