<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彩妆热卖产品列表</title>
<link href="css/Page_248_8.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>大家都喜欢的彩妆</h1>
<ul>
<li><a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜 35g
<div>
<img src="img2/icon-1.jpg" />
<p>¥62.00 最近69122人购买</p>
</div>
</a>
</li>
<li>
<a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
<div>
<img src="img2/icon-2.jpg" />
<p>¥89.00 最近13610人购买</p>
</div>
</a>
</li>
<li>
<a href="#"><span>3</span>菲奥娜水漾CC霜40g
<div>
<img src="img2/icon-3.jpg" />
<p>¥59.90 最近13403人购买</p>
</div>
</a>
</li>
<li>
<a href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml
<div>
<img src="img2/icon-4.jpg" />
<p>¥169.00 最近16757人购买</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
//CSS样式
body{
margin: 0px;
padding: 0px;
background: pink;
}
.container{
/*border:1px solid black;*/
width: 300px;
margin:0px auto;
background: white;
}
.container h1{
background: #e9185a;
margin: 0px;
font-size: 16px;
color: white;
padding: 10px;
}
.container ul{
list-style: none;
padding-left: 0px;
width: 300px;
margin: 0px;
}
.container ul li{
border-bottom: 1px dashed #a8a5a5;
line-height: 30px;
}
.container ul li a{
display: inline-block;
color:#666666;
text-decoration: none;
font-size: 12px;
/*padding-left: 10px;*/
}
.container ul li span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
background: #373b3c;
line-height: 20px;
text-align: center;
color: white;
font-size: 12px;
margin-right: 10px;
}
.container ul li div{
display: none;
width: 300px;
}
.container ul li div img{
/*text-align: center;*/
display: block;
margin: 0px auto;
}
.container ul li div p{
font-size: 10px;
/*text-align: center;*/
margin:0px;
text-align: center;
}
/*鼠标悬浮到超链接上时,出现商品信息*/
.container ul li a:hover span{
background: #e9185a;
}
.container ul li a:hover{
color:#e9185a;
}
.container ul li a:hover div{
display: block;
/*margin: 0px auto;*/
/*margin: 0px auto;*/
}
.container ul li a:hover div p{
color: #e9185a;
}
浮动之热卖产品列表
猜你喜欢
转载自blog.csdn.net/qq_33151859/article/details/78241231
今日推荐
周排行