这里写自定义目录标题
考拉海购美妆板块练习
HTML
- 创建div包含这个区域
- 加入包含img的a标签
- 建立ul li, 每一个li里面包含a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
</head>
<body>
<div class="beautSection">
<a href="#">
<img src="./beauty.jpg">
</a>
<ul>
<li><a href="#">精致护肤</a></li>
<li><a href="#">人气面膜</a></li>
<li><a href="#">大牌彩妆</a></li>
<li><a href="#">防晒修护</a></li>
<li><a href="#">迷人香氛</a></li>
<li><a href="#">面部精华</a></li>
</ul>
</div>
</body>
</html>
CSS
-
父级div class=“beautySection”
padding margin均设为0,设置宽高,overflow设为hidden
position:relative,方便后续子级使用绝对定位。 -
img宽高设为100%
vertal-align设为middle,因为自动对齐父元素的基线,当line-height到达一定高度时下方的距离就会存在,详细解释 -
ul–>li–>a–>/a–>/li–>/ul顺序
利用ul定位和flex布局,ul的position设为absolute,脱离标准流,因为父元素的position是relative,不是static,即可堆叠在其他元素上(在该例子中可堆叠在img上),相对最近的非static元素调整距离
可跳过不对li进行样式设计
将a设置为块级元素,即可设置宽高、padding等属性,才可后续实现光标悬浮在上面改变颜色。
@charset "utf-8";
body{
padding: 0;
margin: 0;
}
.beautSection{
display: inline-block;
position: relative;
background-color: #f00;
width: 330px;
height: 541px;
overflow: hidden;
}
.beautSection ul{
list-style: none;
position: absolute;
bottom: 30px;
display: flex;
flex-wrap: wrap;
list-style: none;
justify-content: space-evenly;
padding: 0;
margin: 0;
}
.beautSection ul li a{
display: inline-block; /*将<a>设置为块级元素才可以设置其他属性 */
text-decoration: none;
background-color: #fff;
border: 1px solid #eee;
font-size: 12px;
width: 60px;
padding: 11px;
border-radius: 40px;
text-decoration: none;
height: 18px;
text-align: center;
color: #333;
margin-top: 10px ;
box-shadow: 0 0 1px rgb(0 0 0 / 10%)
}
.beautSection img{
width: 100%;
height: 100%;
vertical-align: middle;
}
.beautSection ul li a:hover{
color: #f00;
background-color: gainsboro;
}