<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>美容热点产品</title>
<style type="text/css">
.text span{
background-image: url(dot_01.gif);
background-repeat: no-repeat;
padding:10px;
background-position: 0px 8px;
color: #FFF;
border-bottom-style:dashed;
list-style-type:none;
}
.ty {
width:500px;
height:50px;
background-color:#F36;
background-position: left center;
line-height: normal;
color: #FFF;
font-weight: bold;
font-size: 36px;
background-repeat: no-repeat;
}
a:hover{color:#C30;}
.text {
list-style-position: outside;
list-style-type: none;
border-bottom-width: thin;
border-bottom-style: dashed;
}
span{
background-image: url(dot_01.gif);
background-repeat: no-repeat;
background-position: center center;
padding:8px;
}
a:hover span{
background-image: url(dot_02.gif);
background-repeat: no-repeat;
background-position: center center;
padding:8px;
}
.kk{
margin: 0px;
padding: 0px;}
#cometics li div {
display:none;
text-align:center;
}
#cometics a:hover div {
display:block;
}
</style>
</head>
<body>
<div>
<div id="cometics">
<ul class="kk">
<p class="ty">大家都喜欢的彩妆</p>
<li class="text"><a href="#"><span>1 </span>Za姬芮新能真皙美白隔离霜 35gli>
<div><img src="图片素材/icon-1.jpg"/>¥62.00 最近69122人购买</div></a></li>
<li class="text"><a href="#"><span>2 </span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
<div ><img src="图片素材/icon-2.jpg"/>¥89.00 最近13610人购买</div></a></li>
<li class="text"><a href="#"><span>3 </span>菲奥娜水漾CC霜40
<div><img src="图片素材/icon-3.jpg"/> ¥59.90 最近13403人购买</div></a></li>
<li class="text"><a href="#"><span>4 </span>
DHC 蝶翠诗橄榄卸妆油 200ml
<div><img src="图片素材/icon-4.jpg"/>¥169.00 最近16757人购买
</div></a></li>
</ul></div>
</body>
</html>
HTML第六章上机练习5
最新推荐文章于 2021-06-16 05:27:11 发布