标签：doctype ack splay margin ini osi list position 实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 body,ul,li,img,p,span,div{margin:0px;padding:0px;} 8 body{font-size:12px;color:#444;} 9 ul,li{list-style:none;} 10 .shopping{width:800px;margin:50px auto;} 11 .shopping .title{height:30px;line-height:30px;color:#FF6600;font-size:18px;font-weight:bold;border-bottom:2px solid #ff6600;} 12 .shopping .content{padding:22px 6px 0px;} 13 .shopping .content li{ 14 float:left; 15 width:150px; 16 margin:0px 22px 22px 22px; 17 position:relative;/*相对定位*/ 18 } 19 .shopping .content li p{padding:2px 0px;} 20 .shopping .content li .p1{color:#ff6600;} 21 .shopping .content li .span1{color:#990000;font-weight:bold;} 22 .shopping .content li .span2{color:#999;text-decoration:line-through;font-size:10px;padding-left:30px;} 23 .shopping .content div img{position:absolute;top:-15px;right:-15px;} 24 .clear{clear:both;} 25 </style> 26 </head> 27 28 <body> 29 <div class="shopping"> 30 <div class="title">今日闪价</div> 31 <div class="content"> 32 <ul> 33 <li> 34 <a href="#"><img src="images/01.jpg" /></a> 35 <p>[特价款]雷朋板材光学镜架</p> 36 <p class="p1">年终盛典 满128减30元</p> 37 <p><span class="span1">¥476.00</span><span class="span2">¥1360</span></p> 38 <div><img src="images/xsq.png" /></div> 39 </li> 40 <li> 41 <img src="images/02.jpg" /> 42 <p>[特价款]雷朋板材光学镜架</p> 43 <p class="p1">年终盛典 满128减30元</p> 44 <p><span class="span1">¥476.00</span><span class="span2">¥1360</span></p> 45 <div><img src="images/xsq.png" /></div> 46 </li> 47 <li> 48 <img src="images/03.jpg" /> 49 <p>[特价款]雷朋板材光学镜架</p> 50 <p class="p1">年终盛典 满128减30元</p> 51 <p><span class="span1">¥476.00</span><span class="span2">¥1360</span></p> 52 <div><img src="images/xsq.png" /></div> 53 </li> 54 <li> 55 <img src="images/04.jpg" /> 56 <p>[特价款]雷朋板材光学镜架</p> 57 <p class="p1">年终盛典 满128减30元</p> 58 <p><span class="span1">¥476.00</span><span class="span2">¥1360</span></p> 59 <div><img src="images/xsq.png" /></div> 60 </li> 61 <li> 62 <img src="images/05.jpg" /> 63 <p>[特价款]雷朋板材光学镜架</p> 64 <p class="p1">年终盛典 满128减30元</p> 65 <p><span class="span1">¥476.00</span><span class="span2">¥1360</span></p> 66 <div><img src="images/xsq.png" /></div> 67 </li> 68 <li> 69 <img src="images/06.jpg" /> 70 <p>[特价款]雷朋板材光学镜架</p> 71 <p class="p1">年终盛典 满128减30元</p> 72 <p><span class="span1">¥476.00</span><span class="span2">¥1360</span></p> 73 <div><img src="images/xsq.png" /></div> 74 </li> 75 <li> 76 <img src="images/07.jpg" /> 77 <p>[特价款]雷朋板材光学镜架</p> 78 <p class="p1">年终盛典 满128减30元</p> 79 <p><span class="span1">¥476.00</span><span class="span2">¥1360</span></p> 80 <div><img src="images/xsq.png" /></div> 81 </li> 82 <li> 83 <img src="images/08.jpg" /> 84 <p>[特价款]雷朋板材光学镜架</p> 85 <p class="p1">年终盛典 满128减30元</p> 86 <p><span class="span1">¥476.00</span><span class="span2">¥1360</span></p> 87 <div><img src="images/xsq.png" /></div> 88 </li> 89 </ul> 90 <div class="clear"></div> 91 </div> 92 </div> 93 </body> 94 </html>
标签：doctype ack splay margin ini osi list position 实例
原文地址：http://www.cnblogs.com/ChenGuoW/p/6127299.html
