HTML第六章上机练习5
2016-10-18 15:53
260 查看
<!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;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 