HTML第六章上机练习5

来源：互联网发布：mac命令行怎么查找文件编辑：程序博客网时间：2024/05/21 11:34

<!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;}

0 0