HTML第六章上机练习3
2016-10-18 15:29
381 查看
<!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;} </style> </head> <body> <div> <ul class="kk"> <p class="ty">大家都喜欢的美容品</p> <li class="text"><a href="#"><span>1 </span>雅诗兰黛即时修护眼部精华霜15ml</a></li> <li class="text"><a href="#"><span>2 </span>伊丽莎白雅顿显效复合活肤霜 75ml</a></li> <li class="text"><a href="#"><span>3 </span>OLAY玉兰油多效修护霜 50g</a></li> <li class="text"><a href="#"><span>4 </span>巨型一号丝瓜水320ML</a></li> <li class="text"><a href="#"><span>5 </span>倩碧保湿洁肤水2号 200ml</a></li> <li class="text"><a href="#"><span>6 </span>比度克细肤淡印霜 30g</a></li> <li class="text"><a href="#"><span>7 </span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li> <li class="text"><a href="#"><span>8 </span>SK-II护肤精华露 215ml</a>'</li> <li class="text"><a href="#"><span>9 </span>欧莱雅青春密码活颜精华肌底液</a></li></ul></div> </body> </html>
相关文章推荐