Top

淘宝商品float布局

淘宝布局案例学习

源代码如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>淘宝商商品布局</title>
  6     <style type="text/css">
  7         html, body , div, ul, li, span, a, em, img, p{ margin: 0; padding: 0; }
  8         html, body { font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }
  9         .list-shop { 
 10             width: 1210px; 
 11             height: 450px;
 12             border: #ccc solid 1px;
 13             margin: 0 auto;
 14         }
 15         ul,li {
 16              list-style: none;
 17              float: left;
 18              -webkit-transition: border-color .3s;
 19              -moz-transition: border-color .3s;
 20              -o-transition: border-color .3s;
 21              transition: border-color .3s;
 22         }
 23         li.list-shop-li{
 24             list-style: none;
 25             float: left;
 26             margin-top: 20px;
 27             margin-right: 8px;
 28             margin-left: 8px;
 29             width: 224px;
 30             height: 304px;
 31             position: relative;
 32             overflow: hidden;
 33             border: 1px solid #ccc;
 34         }
 35         li.list-shop-li:hover { border: #FF4200 solid 1px; }
 36         .list-shop-li a {
 37             text-decoration: none;
 38             display: inline-block;
 39             color: #9ca0aa;
 40             width: 100%;
 41         }
 42         .list-shop-li a:hover { color: #3C3C3C; }
 43         .list-shop-li a img {
 44             display: inline;
 45             width: 224px;
 46             height: 223px;
 47             letter-spacing: normal;
 48             word-spacing: normal;
 49             zoom: 1;
 50             vertical-align:top;
 51         }
 52         .list-shop-li a p {
 53             display: inline-block;
 54             padding: 3px 12px;
 55             height: 36px;
 56             line-height: 18px;
 57             overflow: hidden;
 58         }
 59         .hotsale-item-info { margin-top: 8px;  padding: 0 13px; }
 60         /**清除浮动*/
 61         .clearfix:after { content: ''; display: table-cell;/**IE8+*/*display: inline-block;/**IE7*/clear: both;}
 62         .clearfix:after {content: '';display: table;/**IE8+*/
 63         }
 64         .clearfix {*zoom: 1;}
 65         .clearfix:before {content: '';display: table;/**IE8+*/}
 66         .hotsale-item-info-left { float: left; font-size: 16px; color:#F40;  }
 67         .hotsale-item-info-left em { font-style: normal; }
 68         .hotsale-item-info-right { float: right; color: #9ca0aa;  }
 69     </style>
 70 </head>
 71 <body>
 72     <div class="list-shop">
 73         <ul>
 74             <li class="list-shop-li">
 75                 <a href="#none">
 76                    <img src="images/1.jpg" class="images" style="display:inline;">
 77                    <p class="list-shop-li-detail">
 78                            <span>女童长袖礼服裙公主裙儿童晚礼服花童礼服裙婚纱裙演出表演裙春夏</span>
 79                    </p>
 80                 </a>
 81                 <p class="hotsale-item-info clearfix">
 82                     <span class="hotsale-item-info-left"><em>¥</em>180</span>
 83                     <span class="hotsale-item-info-right">销量:568</span>
 84                 </p>
 85             </li>
 86 
 87             <li class="list-shop-li">
 88                <span class='list-shop-li-imgarea'>
 89                     <a href="#none">
 90                         <img src="images/2.jpg" class="images">
 91                         <p class="list-shop-li-detail">
 92                             <span>女童长袖礼服裙公主裙儿童晚礼服花童礼服裙婚纱裙演出表演裙春夏</span>
 93                         </p>
 94                     </a>
 95                 </span>
 96                 <p class="hotsale-item-info clearfix">
 97                     <span class="hotsale-item-info-left"><em>¥</em>230</span>
 98                     <span class="hotsale-item-info-right">销量:568</span>
 99                 </p>
100             </li>
101 
102 
103             <li class="list-shop-li">
104                <span class='list-shop-li-imgarea'>
105                     <a href="#none">
106                         <img src="images/3.jpg" class="images">
107                         <p class="list-shop-li-detail"><span>女童长袖礼服裙公主裙儿童晚礼服花童礼服裙婚纱裙演出表演裙春夏</span></p>
108                     </a>
109                 </span>
110                 <p class="hotsale-item-info clearfix">
111                     <span class="hotsale-item-info-left"><em>¥</em>240</span>
112                     <span class="hotsale-item-info-right">销量:568</span>
113                 </p>
114             </li>
115 
116 
117 
118             <li class="list-shop-li">
119                <span class='list-shop-li-imgarea'>
120                     <a href="#none">
121                         <img src="images/4.jpg" class="images">
122                         <p class="list-shop-li-detail"><span>女童长袖礼服裙公主裙儿童晚礼服花童礼服裙婚纱裙演出表演裙春夏</span></p>
123                     </a>
124                 </span>
125                 <p class="hotsale-item-info clearfix">
126                     <span class="hotsale-item-info-left"><em>¥</em>235</span>
127                     <span class="hotsale-item-info-right">销量:568</span>
128                 </p>
129             </li>
130 
131 
132             <li class="list-shop-li">
133                <span class='list-shop-li-imgarea'>
134                     <a href="#none">
135                         <img src="images/5.jpg" class="images">
136                         <p class="list-shop-li-detail"><span>女童长袖礼服裙公主裙儿童晚礼服花童礼服裙婚纱裙演出表演裙春夏</span></p>
137                     </a>
138                 </span>
139                 <p class="hotsale-item-info clearfix">
140                     <span class="hotsale-item-info-left"><em>¥</em>340</span>
141                     <span class="hotsale-item-info-right">销量:568</span>
142                 </p>
143             </li>
144             
145         </ul>
146     </div>
147     
148 </body>
149 </html>

 

posted @ 2016-05-02 23:37  Avenstar  阅读(300)  评论(0)    收藏  举报