第七章3-CSDN博客

本文链接：https://blog.csdn.net/qq3144836446/article/details/80808178

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彩妆热卖产品列表</title>
<style>
div{
}

.title{
color: white;
font-weight: bold;
background-color: #E9185A;
height:40px;
line-height: 40px;
padding-left: 10px;
margin-top: 0px;
}
li{
list-style-type: none;
font-size: 14px;
border: 0.5px dashed gray;
padding: 6px;
}
ul{
width: 300px;
margin: -17px 60px 0px -40px;
background: white;
}
span{
width: 20px;
height: 20px;
border-radius:50%;
line-height: 20px;
text-align: center;
display: inline-block;
margin-right: 10px;
color: white;
font-weight: bold;
background-color: black;
}
a{
text-decoration: none;
color: gray;
}
a:hover{
color: #E9185A;
}
a:hover span{
background-color: #E9185A;
}
ul li div{
display: none;
text-align: center;
}
li a:hover div{
display: block;
}
</style>
</head>
<body style="background-color: #EEE7E1">
<div style="width: 300px;padding: 0px">
<p class="title">大家都喜欢的彩妆</p>
<ul>
<li>
<a href="#"><span>1</span>
Za姬芮新能真皙美白隔离霜 35g
<div>
<img src="images/homework5/icon-1.jpg">
<p>￥62.00 最近2人购买</p>
</div>
</a>
</li>
<li>
<a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
<div>
<img src="images/homework5/icon-2.jpg">
<p>￥89.00 最近10人购买</p>
</div>
</a>
</li>
<li>
<a href="#"><span>3</span>菲奥娜水漾CC霜40g
<div>
<img src="images/homework5/icon-3.jpg">
<p> ￥59.90 最近13人购买</p>
</div>
</a>
</li>
<li>
<a href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml
<div>
<img src="images/homework5/icon-4.jpg">
<p>￥169.00 最近17人购买</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>