您的位置：首页 > Web前端 > HTML

HTML第六章上机题5--------聚美优品彩妆热卖产品类表

2016-10-18 16:17 176 查看

<!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">
body {
background-color: #FF9;
}
.m {
width:350px;
border-top-width: thin;
border-top-style: solid;
border-top-color:#000;
list-style-type:none;
background:#FFF;
}
ul {
padding:0px;
margin:0px;
}
.sty {
font-size: 24px;
font-weight: bold;
color: #FFF;
background-color: #F9F;
}
.text  {
border-bottom-color:#CCC;
border-bottom-style:dashed;
font-size:14px;

}
a span {
color:#FFF;
background:url(file:///C|/Users/Administrator/Desktop/dot_01.gif) 0px 5px no-repeat;
text-align:center;
padding:10px;
font-weight:bold;
}
a:hover span {
color:#000;
background-image: url(dot_02.gif);
background-repeat: no-repeat;
background-position: 0px 8px;
}
a {
text-decoration:none;
color: #999999;
line-height:40px;
}
a:hover {
color: #F9F;
}

li div{
display:none;
text-align:center;
}
a:hover div{
display:block;
}

</style>
</head>

<body>
<ul class="m">
<li class="sty"> 大家都喜欢的彩妆 </li>
<li class="text"><a href="#"><span>1</span> Za姬芮新能真皙美白隔离霜 35g
<div><img src="icon-1.jpg" alt="Za姬芮新能真皙美白隔离霜" />
<p>￥62.00 最近69122人购买</p>
</div>
</a></li>
<li class="text"><a href="#"><span>2</span>  美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml  75ml
<div><img src="icon-2.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜" />
<p>￥89.00 最近13610人购买</p>
</div>
</a></li>
<li class="text"><a href="#"><span>3</span> 菲奥娜水漾CC霜40g
<div><img src="icon-3.jpg" alt="菲奥娜水漾CC霜" />
<p>￥59.90 最近13403人购买</p>
</div>
</a></li>
<li class="text"><a href="#"><span>4</span> DHC 蝶翠诗橄榄卸妆油 200ml
<div><img src="icon-4.jpg" alt="DHC 蝶翠诗橄榄卸妆油" />
<p>￥169.00 最近16757人购买</p>
</div>
</a></li>

</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航