HTML第六章上机练习5

最新推荐文章于 2019-12-06 22:27:21 发布

子晴呀

最新推荐文章于 2019-12-06 22:27:21 发布

阅读量3.9k

点赞数 1

本文链接：https://blog.csdn.net/qq_36074064/article/details/52849650

版权

<!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=gb2312" />
<title>彩妆热卖产品列表</title>
<link href="55.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="cosmetics">
<p class="title">大家都喜欢的彩妆</p>
<ul>
<li><a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜 35g
<div><img src="icon-3.jpg"  alt="Za姬芮新能真皙美白隔离霜" />
<p>￥62.00  最近69122人购买</p>
</div>
</a></li>
<li><a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
<div><img src="icon-2.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜" />
<p>￥89.00  最近13610人购买</p>
</div>
</a></li>
<li><a href="#"><span>3</span>菲奥娜水漾CC霜40g
<div><img src="icon-1.jpg" alt="菲奥娜水漾CC霜" />
<p>￥59.90  最近13403人购买</p>
</div>
</a></li>
<li><a href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml
<div><img src="icon-4.jpg" alt="DHC 蝶翠诗橄榄卸妆油" />
<p>￥169.00  最近16757人购买</p>
</div>
</a></li>
</ul>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */

body, p, ul, li {margin:0px;padding:0px;}
ul, li {list-style-type:none;}
body {background-color:#eee7e1;font-size:12px;}
img {border:0px;}
#cosmetics {width:255px;background-color:#FFF;}
#cosmetics .title {font-size:14px;font-weight:bold;color:#FFF;background-color:#e9185a;height:35px;line-height:35px;padding-left:10px;}
#cosmetics li {border-bottom:1px #a8a5a5 dashed;line-height:30px;padding-left:2px;}
#cosmetics li div {display:none;text-align:center;}
#cosmetics a {color:#666666;text-decoration:none;}
#cosmetics a:hover {color:#e9185a;}
#cosmetics a span {color:#FFF;background:url(dot_01.gif) 0px 5px no-repeat;text-align:center;padding:10px;font-weight:bold;}
#cosmetics a:hover span {color:#FFF;background:url(dot_02.gif) 0px 5px no-repeat;}
#cosmetics a:hover div {display:block;}