布置的列表作业,里面主要是符号123,还有就是hover了,移入出现隐藏的代码,先布局,把HTML排列好
<body>
<div id="box">
<h4>大家都喜欢的彩妆</h4>
<ul>
<li><span>1</span> <a href="#">Za姬芮新能真皙美白隔离霜35g</a> <p><img src="./image/icon-1.jpg"></p></li>
<li><span>2</span> <a href="#">美宝莲精纯矿物奇妙新颜乳霜BB霜</a> <p><img src="./image/icon-2.jpg"></p></li>
<li><span>3</span> <a href="#">菲奥娜水漾CC霜40g</a><p><img src="./image/icon-3.jpg"></p></li>
<li><span>4</span> <a href="#">DHC叠翠诗橄榄卸妆油</a><p><img src="./image/icon-4.jpg"></p></li>
</ul>
</div>
</body>
然后开始写css
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#box{
width: 320px;
height: auto;
background-color:rgb(228, 220, 220);
}
h4{
color: white;
background-color: rgb(233,24,90);
width: 320px;
height: 40px;
display: inline-block;
line-height: 46px;
}
span{
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
color: white;
font-weight: bolder;
background-color: rgb(55,59,60);
margin-right: 10px;
}
li,a{
color: rgb(154,136,167);
}
li{
border-bottom: rgb(55,59,60) 1px dashed;
width: 320px;
}
li,a:hover{
color: rgb(233,24,90);
}
p{
display: none;
}
li:hover>p{
display: inline-block;
height: auto;
transition: all 3s;
}
</style>
运行结果就出现了
当鼠标移入后就出现隐藏的图片了