HTML--練習製作聚美優品美容熱點產品列表
阿新 • • 發佈：2019-01-06
<!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: 1em; } a{ text-decoration:none } a:hover span{ background-image: url(dot_02.gif); background-repeat: no-repeat; padding: 10px; background-position:center center; } span{ background-image: url(dot_01.gif); background-repeat: no-repeat; padding: 10px; background-position:center center;s } </style> </head> <body class="b"> <div class="a">大家都喜歡買的美容品</div> <div class="c"> <ul class="d"> <li class="aa"><a href="#"/><span>1.</span>雅詩蘭黛即時修護眼部精華霜15ml</a></li> <li class="aa"><a href="#"/><span>2.</span>伊麗莎白雅頓顯效複合活膚霜 75ml</a></li> <li class="aa"><a href="#"/><span>3.</span>OLAY玉蘭油多效修護霜 50g</a></li> <li class="aa"><a href="#"/><span>4.</span>巨型一號絲瓜水320ML</a></li> <li class="aa"><a href="#"/><span>5.</span>比度克細膚淡印霜 30g</a></li> <li class="aa"><a href="#"/><span>6.</span>蘭芝 (LANEIGE)夜間修護鎖水面膜 80ml</a></li> <li class="aa"><a href="#"/><span>7.</span>SK-II護膚精華露 215ml</a></li> <li class="aa"><a href="#"/><span>8.</span>歐萊雅青春密碼活顏精華肌底液</a></li> </ul>
</div>
</body>
</html>