HTML第六章上機練習5
阿新 • • 發佈：2019-01-26
<!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>