HTML練習---製作聚美優品彩妝熱賣產品列表頁面
阿新 • • 發佈：2019-01-07
<!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"> .a { background-color: #F3C; padding: 7px; color: #FFF; } .b { width:300px; height:500px; background-color:#FFC; } .c{ padding: 7px; color: #666; } .d { width: background-position: center center; padding:0px; margin:0px; } .aa { list-style-position: outside; list-style-type: none; margin: 1px; padding: 1px; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-bottom-style: dashed; text-indent: 1; text-align: center; } a{ text-decoration:none } a:hover span{ background-image: url(dot_02.gif); background-repeat: no-repeat; padding: 10px; background-position: left center; } a:hover div{ display: block; } span{ background-image: url(dot_01.gif); background-repeat: no-repeat; padding: 10px; background-position:center center; } .z{display:none} </style> </head> <body class="b"> <div class="a">大家都喜歡彩妝</div> <div class="c"> <ul class="d"> <li class="aa"><a href="#"/><span>1.</span>Za姬芮新能真皙美白隔離霜 35g <div class="z"><img src="icon-1.jpg" /><br/>￥62.00 最近69122人購買</div></a></li> <li class="aa"><a href="#"/><span>2.</span>美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml <div class="z"><img src="icon-2.jpg" /><br/>￥89.00 最近13610人購買</div> </a></li> <li class="aa"><a href="#"/><span>3.</span>菲奧娜水漾CC霜40gl <div class="z"><img src="icon-3.jpg" /><br/>￥59.90 最近13403人購買</div></a></li> <li class="aa"><a href="#"/><span>4.</span>DHC 蝶翠詩橄欖卸妝油 200ml<div class="z"><img src="icon-4.jpg" /><br/>￥169.00 最近16757人購買</div></a></li> </ul> </div> </body> </html>