CSS -- 练习（待续优化）

啊啊啊错误百出啊错点总结：字符全角半角、清楚浮动、结尾</div>有点乱找不到对应的了、注释要写好、

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="utf-8">
  5         <link rel="stylesheet" href="mlsm.css">
  6     </head>
  7     <body>
  8     <!-- 顶部导航 -->
  9     <div class="top clearfix">
 10         <div class="top-a">
 11         <div class="top-l"><a href="#">您好，欢迎来到素材网</a></div>
 12         <div class="top-r">
 13             <ul>
 14                 <li><a href="#">网站导航<span></span></a></li>
 15                 <li><a href="#">客服中心<span></span></a></li>
 16                 <li><a href="#">建材服务<span></span></a></li>
 17                 <li><a href="#">我的收藏<span></span></a></li>
 18                 <li><a href="#">我的商务室<span></span></a></li>
 19                 <li><a href="#">素材网首页<span></span></a></li>
 20             </ul>
 21         </div>
 22         </div>
 23         </div>
 24         <!-- 顶部导航结束 -->
 25     <!-- 顶部logo和搜索 -->
 26     <div class="search clearfix">
 27         <div class="logo fl"><img src="1.png"  alt="logo"></div>
 28         <div class="r-search fr">
 29             <input type="text" value="请输入关键字">
 30             <input type="button">
 31         </div>
 32         </div>
 33     <!-- 主导航 -->
 34     <div class="nav clearfix" >
 35         <ul>
 36             <li><a href="#">首页</a></li>
 37             <li><a href="#">建筑材料</a></li>
 38             <li><a href="#">儿童安全座椅</a></li>
 39             <li><a href="#">工艺美术品</a></li>
 40         </ul>
 41         </div>
 42     <!-- banner部分开始 -->
 43     <div class="banner clearfix">
 44         <!-- 左侧盒子 -->
 45         <div class="l-banner">
 46             <div class="l-banner-title">商机市场</div>
 47             <ul>
 48                 <li class="img1"><a href="#">建筑材料</a></li>
 49                 <li class="img2"><a href="#">儿童安全座椅</a></li>
 50                 <li class="img3"><a href="#">工艺美术品</a></li>
 51                 <li class="img4"><a href="#">建筑材料</a></li>
 52                 <li class="img5"><a href="#">儿童安全座椅</a></li>
 53                 <li class="img6"><a href="#">工艺美术品</a></li>
 54             </ul>
 55         </div>
 56         <!-- 中间的盒子 -->
 57         <div class="c-banner "><a href="#"><img src="center.png" height="212" width="520" alt=""></a></div>
 58         <!-- 右侧的盒子 -->
 59         <div class="r-banner ">
 60             <div class="banner-top"><a href="#"><img src="center-r.png"  alt=""></a></div>
 61             <div class="banner-top"><a href="#"><img src="center-r2.png"  alt=""></a></div>
 62             
 63             
 64         </div>
 65         </div>
 66     <!-- 建筑材料 -->
 67     <div class="bud clearfix">建筑材料</div>
 68     <!-- 左侧大盒子 -->
 69         <div class="pro">
 70         <div class="l-pro fl">
 71             <div class="t-l-pro">
 72             <!-- 第一个盒子 -->
 73                 <div class="l-t-l-pro fl">
 74                     <div class="left-sidebar fl">
 75                         <div class="t-left-sidebar">
 76                         <img src="c1.png" alt=""></div>
 77                         <!-- 立即购买 -->
 78                         <div class="b-left-sidebar"><input type="button"></div></div>
 79                     <!-- 图片右侧的盒子 -->
 80                     <div class="right-sidebar fl">
 81                         <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
 82                         <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
 83                         <p class="three"><span>239.00</span>
 84                                         <del> &yen;386.00</del></p>
 85                         <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
 86                     </div> 
 87                 </div>
 88                 <!-- 横着第二个盒子 -->
 89                 <div class="l-t-l-pro fl">
 90                     <div class="left-sidebar fl">
 91                         <div class="t-left-sidebar">
 92                         <img src="c1.png" alt=""></div>
 93                         <!-- 立即购买 -->
 94                         <div class="b-left-sidebar"><input type="button"></div></div>
 95                     <!-- 图片右侧的盒子 -->
 96                     <div class="right-sidebar fl">
 97                         <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
 98                         <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
 99                         <p class="three"><span>239.00</span>
100                                         <del> &yen;386.00</del></p>
101                         <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
102                     </div> 
103                     </div></div>
104                     <!-- 中间的线 -->
105                     <div class="line"></div>
106                     <!-- 底部的盒子 -->
107                     <div class="t-l-pro">
108                         <div class="l-t-l-pro fl">
109                         <div class="left-sidebar fl">
110                         <div class="t-left-sidebar">
111                         <img src="c1.png" alt=""></div>
112                     <!-- 立即购买 -->
113                         <div class="b-left-sidebar"><input type="button"></div></div>
114                     <!-- 图片右侧的盒子 -->
115                         <div class="right-sidebar fl">
116                         <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
117                         <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
118                         <p class="three"><span>239.00</span>
119                                         <del> &yen;386.00</del></p>
120                         <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
121                         </div> 
122                         </div>
123                     <!-- 底部横着第二个盒子 -->
124                         <div class="l-t-l-pro fl">
125                         <div class="left-sidebar fl">
126                         <div class="t-left-sidebar">
127                         <img src="c1.png" alt=""></div>
128                         <!-- 立即购买 -->
129                         <div class="b-left-sidebar"><input type="button"></div></div>
130                         <!-- 图片右侧的盒子 -->
131                         <div class="right-sidebar fl">
132                         <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
133                         <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
134                         <p class="three"><span>239.00</span>
135                                         <del> &yen;386.00</del></p>
136                         <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
137                         </div> </div></div> </div>    
138     <!-- 右侧的盒子 -->
139 
140         <div class="r-pro fr">
141         <div class="top-r-pro ">建材资讯</div>
142         <div >
143             <ul>
144             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
145             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
146             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
147             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
148             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
149             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
150             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
151             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
152             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
153             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
154             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
155             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
156         </ul>
157         </div>
158         </div>
159         </div>
160     <!-- 儿童安全座椅 -->
161     <div class="bud clearfix">儿童安全座椅</div>
162     <!-- 儿童安全座椅专区 -->
163     <div class="baby clearfix">
164     
165 <!-- 右侧盒子 -->
166     <div class="r-baby fr">
167     <img src="et_right.png" class="t-pic"  alt="">
168     <br>
169     <img src="et_right_bottom.png" height="177" width="218" alt="">
170     
171     </div>
172     <!-- 左侧盒子 -->
173         <div class="title fl"><a href="#">详情请点击>></a></div>
174         <div class="box fl">
175             <div class="ban fl">
176             <div class="one"><img src="et01.png" height="170" width="164" alt="">
177                     <p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
178                     <p class="et2">适合年龄9个月-4岁</p>
179                     <p class="et3">市场价:<span>¥5580</span></p>
180                     <p class="et4">直销价:<span>¥3380</span></p>
181                 </div>
182             </div>
183             <div class="ban fl">
184             <div class="one"><img src="et01.png" height="170" width="164" alt="">
185                     <p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
186                     <p class="et2">适合年龄9个月-4岁</p>
187                     <p class="et3">市场价:<span>¥5580</span></p>
188                     <p class="et4">直销价:<span>¥3380</span></p>
189             </div>
190             </div>
191             <div class="ban fl ">
192             <div class="one"><img src="et01.png" height="170" width="164" alt="">
193                     <p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
194                     <p class="et2">适合年龄9个月-4岁</p>
195                     <p class="et3">市场价:<span>¥5580</span></p>
196                     <p class="et4">直销价:<span>¥3380</span></p>
197             </div>
198             </div>
199             <div class="ban fl">
200             <div class="one"><img src="et01.png" height="170" width="164" alt="">
201                     <p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
202                     <p class="et2">适合年龄9个月-4岁</p>
203                     <p class="et3">市场价:<span>¥5580</span></p>
204                     <p class="et4">直销价:<span>¥3380</span></p>
205             </div>
206             </div>
207             </div>
208     </div>
209 <!-- 工艺艺术品 -->
210     <div class="bud ">工艺艺术品</div>
211 <!-- 艺术品图片 -->
212     <div class="art clearfix">
213         <!-- 上面的盒子 -->
214         <div class="t-art fl">
215           <!-- 左边的 -->
216             <div class="t-one ">
217                 <div class="t-t-one fl">
218                 <div class="t-icon fl">
219                 <div class="l-t-icon">
220                 <img src="c1.png"  >
221                 </div>
222                 <input type="button" >
223                 </div>
224                 <div class="right-p fr">
225                 <p class="p1 " > 好太太晾衣架 铝钛合金 升降双杆</p>
226                 <p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p>
227             
228                 <p><span class="money1">239.00</span>
229                  <span class="money2">386.00</span></p>
230                 <p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
231                 </div></div>
232             
233                 <div class="t-t-one fr">
234                 <div class="t-icon fl">
235                 <div class="l-t-icon">
236                 <img src="c1.png"  >
237                 </div>
238                 <input type="button" >
239                 </div>
240             <div class="right-p fr">
241             <p class="p1 fl" > 好太太晾衣架 铝钛合金 升降双杆</p>
242             <p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p>
243             
244             <p><span class="money1">239.00</span>
245              <span class="money2">386.00</span></p>
246             <p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
247             </div></div></div>    
248         <!-- 中间的线 -->
249         <div class="c-linee ">
250         <!-- 下面的盒子 -->
251         <div class="t-one fl">
252                 <div class="t-t-one fl">
253                 <div class="t-icon fl">
254                 <div class="l-t-icon">
255                 <img src="c1.png"  >
256                 </div>
257                 <input type="button" >
258                 </div>
259                 <div class="right-p fr">
260                 <p class="p1 " > 好太太晾衣架 铝钛合金 升降双杆</p>
261                 <p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p>
262             
263                 <p><span class="money1">239.00</span>
264                  <span class="money2">386.00</span></p>
265                 <p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
266                 </div></div>
267             
268                 <div class="t-t-one fr">
269                 <div class="t-icon fl">
270                 <div class="l-t-icon">
271                 <img src="c1.png"  >
272                 </div>
273                 <input type="button" >
274                 </div>
275              <div class="right-p fr">
276              <p class="p1 fl" > 好太太晾衣架 铝钛合金 升降双杆</p>
277              <p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p>
278              
279              <p><span class="money1">239.00</span>
280              <span class="money2">386.00</span></p>
281              <p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
282              </div></div></div></div></div>
283         <!-- 艺术品右侧 -->
284         <div class="r-pro fr">
285         <div class="top-r-pro">建材商社</div>
286         <div class="light fr "><img src="subtitle.png">在装灯具时，如果装上分开关，可以省去很多烦恼，因为如果只有一个总开关</div>
287         <ul>
288             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
289             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
290             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
291             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
292             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
293             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
294             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
295             <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
296         </ul></div></div>
297 <!-- 友情链接 -->
298     <div class="flink">
299         <div class="flink-con ">
300             <div class="txt-flink" >友情链接:</div>
301             <ul >
302                     <li><a href="#">爱佳萌网</a></li>
303                     <li><a href="#">爱佳萌网</a></li>
304                     <li><a href="#">爱佳萌网</a></li>
305                     <li><a href="#">爱佳萌网</a></li>
306                     <li><a href="#">爱佳萌网</a></li>
307                     <li><a href="#">爱佳萌网</a></li>
308                     <li><a href="#">爱佳萌网</a></li>
309                     <li><a href="#">爱佳萌网</a></li>
310                     <li><a href="#">爱佳萌网</a></li>
311                     <li><a href="#">爱佳萌网</a></li>
312                     <li><a href="#">爱佳萌网</a></li>
313                     <li><a href="#">爱佳萌网</a></li>
314                     <li><a href="#">爱佳萌网</a></li>
315                     <li><a href="#">爱佳萌网</a></li>
316                     <li><a href="#">爱佳萌网</a></li>
317                     <li><a href="#">爱佳萌网</a></li>
318                     <li><a href="#">爱佳萌网</a></li>
319                     <li><a href="#">爱佳萌网</a></li>
320                     <li><a href="#">爱佳萌网</a></li>
321                     <li><a href="#">爱佳萌网</a></li>
322                     <li><a href="#">爱佳萌网</a></li>
323                     <li><a href="#">爱佳萌网</a></li>
324                     <li><a href="#">爱佳萌网</a></li>
325                     <li><a href="#">爱佳萌网</a></li>
326                     <li><a href="#">爱佳萌网</a></li>
327                     <li><a href="#">爱佳萌网</a></li>
328                     <li><a href="#">爱佳萌网</a></li>
329                     <li><a href="#">爱佳萌网</a></li>
330                 </ul>    
331 
332         </div></div>
333 <!-- 关于我们 -->
334     <div class="copyright">
335         <ul <!-- class="clearfix" -->
336             <li><a href="#">关于我们</a></li>
337             <li><a href="#">关于我们</a></li>
338             <li><a href="#">关于我们</a></li>
339             <li><a href="#">关于我们</a></li>
340             <li><a href="#">关于我们</a></li>
341             <li><a href="#">关于我们</a></li>
342             <li><a href="#">关于我们</a></li>
343             <li><a href="#">关于我们</a></li>
344             <li><a href="#">关于我们</a></li>
345             <li><a href="#">关于我们</a></li>
346         </ul>
347         <p class="p1">中国建网 版权所有 2000-20012 服务热线：0571-98899898 请与我们联系：server@163.com</p>
348         <p class="p2">建材网会员互动群：12312313213本网实名:中建网</p>
349         
350     </div>
351 
352  </body>
353 
354 </html>

  1 /*
  2 * @Author: Mingming
  3 * @Date:   2017-03-03 09:52:05
  4 * @Last Modified by:   Mingming
  5 * @Last Modified time: 2017-03-04 10:05:48
  6 */
  7 /* 页面清理 */
  8 body,div,p,ul,li{
  9     margin: 0;
 10     padding: 0;
 11     font:12px 宋体;
 12     }
 13     input,img{
 14     border:0 none;
 15     }
 16     input{
 17     outline-style: none;
 18     }
 19     a{
 20     color: #000;
 21     text-decoration: none;
 22     }
 23     ul,li{
 24     list-style: none;
 25     }
 26     .clearfix:after{
 27     display: block;
 28     content: "." ;
 29     line-height:0;
 30     visibility: hidden;
 31     clear: both;
 32     }
 33     .clearfix{
 34         zoom:1;
 35     }
 36     .copyright,.flink,.baby,.top-a,.search,.nav,.banner,.bud,.pro,.art{
 37     width: 970px;
 38     margin: 0 auto;
 39     }
 40 /* 顶部导航 */
 41 .top{
 42     background-color: #F7F7F7;
 43     border:1px solid #D8D8D8 ;
 44     height:26px;
 45     }
 46     
 47     .top-l ,.fl{
 48         float: left;
 49     }
 50     .top-r,.fr{
 51         
 52         float: right;
 53     }
 54     .top-l,.top-r{
 55         line-height: 26px;
 56     }
 57     .top-r ul ,.top-r li ,.top-r a{
 58         display: inline-block;
 59     }
 60     .top-r li{
 61         background: url(sj.png) right no-repeat;
 62         padding-right: 2px;
 63     }
 64     .top-r a{
 65         padding-right:10px;
 66         height: 26px;
 67     }
 68     /* 顶部导航结束 */
 69 /* 顶部logo */
 70 .search{
 71         margin-top: 12px;
 72         height: 84px;
 73         }
 74      .search .logo{
 75      width: 200px;
 76      height: 84px;
 77      }
 78      .r-search{
 79         width: 528px;
 80         height: 40px;
 81         border:1px solid #C9C9C9;
 82         background: #f5f5f5;
 83         margin-top: 30px;
 84         }
 85      .r-search input[type=text]{
 86         width: 419px;
 87         height: 28px;
 88         border:1px solid #A6A6A6;
 89         float: left;
 90         margin: 4px 0 0 4px;
 91         }
 92      .r-search input[type=button]{
 93         width: 96px;
 94         height: 32px;
 95         background: url(serch.png);
 96         float: left;
 97         margin-top: 4px;
 98         }
 99         /* 顶部logo和搜索框结束 */
100 /* 主导航 */
101 .nav{
102     margin-top: 12px;
103     height: 25px;
104     border-bottom: 3px solid #0266a2;
105     }
106     .nav ul li{
107         float: left;
108     }
109     .nav ul li a{
110         display: inline-block;
111         height: 25px;
112         line-height: 25px;
113         padding:0 16px;
114         color: #2F6CAD;
115         }
116 /* 商机市场 */
117 .banner{
118     margin-top: 10px;
119     /* margin-bottom: 15px; */
120     }
121     /* 左侧盒子 */
122     .l-banner{
123         width: 200px ;
124         height: 210px ;
125         float: left;
126         background: #EBF0F6;
127     }
128     .l-banner-title{
129         height: 30px;
130         line-height: 30px;
131         color: #fff;
132         padding-left:20px  ;
133         background-color: #0266A2 ;
134     }
135     .l-banner ul{
136         margin-top: 5px;
137     }
138     .l-banner ul li{
139         height: 28px;
140         line-height: 28px;
141         padding-left: 40px;
142     }
143     .img1{background: url("icon_1.png") no-repeat 12px;}
144     .img2{background: url("icon_2.png") no-repeat 10px;}
145     .img3{background: url("icon_3.png") no-repeat 8px;}
146     .img4{background: url("icon_4.png") no-repeat 9px;}
147     .img5{background: url("icon_5.png") no-repeat 9px;}
148     .img6{background: url("icon_6.png") no-repeat 9px;}
149     /*中间的盒子 */
150      .c-banner{
151         float: left;
152         width: 520px;
153         height: 212px;
154       }
155     /* 右侧的盒子 */
156      .r-banner{
157         float: right;
158         width: 230px;
159         height: 210px;
160      }
161      .banner-top{
162         height: 95px;
163         width: 229px;
164         margin-bottom: 10px;
165         border-right: 1px solid #DFE6F0;
166      }
167 /* 建筑材料 */
168 .bud,.child，{    
169         width: 948px;
170         height: 34px;
171         background: #EBF0F6 ;
172         padding-left: 22px  ;
173         line-height: 34px;
174         font-weight: 700;
175         font-size: 14px;
176         margin-bottom: 10px;
177         margin-top: 10px;
178         border-top: 3px solid #C3D6E4 ;
179         }
180 /* 好太太衣架 */
181 .pro{
182         height:344px  ;
183         /* background-color: #DBDBEA ; */
184         }
185         .l-pro{
186         width:729px  ;
187         height: 346px;
188         border: 1px solid #CACACA;
189         /* background: #757584; */
190         }
191         .t-l-pro{
192         width: 666px;
193         height: 142px;
194         margin:15px 0 15px 26px;
195 
196         /*     background: #9B9B8C ; */
197         }
198         .l-t-l-pro{
199         width: 331px;
200         height: 142px;
201         /* background: #B9B9C8; */
202         
203      }
204      .left-sidebar{
205         width: 99px;
206         height:145px  ;    
207      }
208 
209      .t-left-sidebar{
210         width: 97px;
211         height:63px;
212         border:1px solid #CACACA;
213         padding:19px 0 18px 0;
214         text-align: center;
215         margin-bottom: 15px;
216      }
217      input[type=button]{
218             /* display: inline-block; */
219             width: 99px;
220             height: 26px;
221             background:url("buy.png");
222      }
223      .right-sidebar{
224         height: 142px;
225         width: 220px;
226         margin-left: 10px;
227 
228      }
229      .right-sidebar p{
230 
231         font-size: 14px;
232 
233      }
234      .one{
235         height: 30px;
236         margin-top: 9px;
237      }
238      .two{
239         height: 17px;
240      }
241      .three{
242         margin-top: 30px;
243         height: 20px;
244       }
245      .three span{
246          font-weight: 700;
247         color: red;
248         }
249      .three del{
250         font-size: 12px;
251      }
252      .four{
253         margin-top: 16px;
254      }
255      .four span{
256         color: red;
257         font-weight: 700;
258      }
259      .line{
260             margin: 14px 5px;
261             height: 1px;
262             background: #eee;
263      }
264      .r-pro{
265         width: 220px;
266         height: 346px;
267         border: 1px solid #eee;
268      }
269      .top-r-pro{
270         background: #FBFBFB;
271         line-height: 28px;
272         height: 28px;
273         padding-left: 15px; 
274         border-bottom: 1px solid #DFE6F0;
275      }
276      .r-pro ul{
277         margin-top: 11px;
278      }
279      .r-pro ul li{
280 
281         height: 24px;
282         line-height: 24px;
283         padding-left: 25px;
284         background: url(li_bg.png) no-repeat 10px;
285      }
286      .r-pro ul li a:hover{
287         color: #ff0000;
288         text-decoration:underline;
289      }
290 /* 开始儿童座椅 */
291     .child{
292     margin:15px auto;
293     }
294     .baby{
295         height: 326px;    
296     }
297     .box{
298         width: 722px;
299         height: 298px;
300         border:1px solid #C3D6E4 ;
301         border-top-width: 3px;
302     }
303     .baby .title{
304     width: 722px;
305     height:25px; 
306     background: url("et.png") no-repeat;
307     font-size: 14px;
308     font-weight: 700;
309     line-height: 25px;
310     
311     text-align: right;
312     }
313     .baby .title a{
314         color:#00b0e7;
315     }
316     .ban{
317         height: 301px;
318         /* border: 1px solid #00b0e7; */
319         
320     }
321     .ban .one{
322         width: 164px;
323         height: 283px;
324         margin-left: 13px;
325         margin-top: 5px;
326     }
327     .ban .one .et1{
328         margin-top: 10px;
329         
330     }
331     .ban .one .et1,.ban .one .et2,.ban .one .et3,.ban .one .et4{
332         text-align: center;
333         margin-top: 10px;
334     }
335     .ban .one .et3 span{
336         text-decoration: line-through;
337     }
338     .ban .one .et4 span{
339         color: red;
340     }
341     .r-baby  .t-pic{
342         border: 1px solid #CBCBCB;
343         margin-bottom: 17px;
344     }
345 /* 开始工艺艺术品 */
346 .t-art{
347         width: 729px;
348         height: 346px;
349         border: 1px solid #eee;
350         }
351      .t-one{
352         width: 666px;
353         height: 142px;
354         margin-top: 10px;
355         margin-left: 22px;
356         }
357         .t-t-one{
358             width: 331px;
359             height: 142px;
360         }
361      /* .t-icon{
362          width: 97px;
363          height: 142px;
364      } */
365      .l-t-icon{
366          width: 97px;
367          height: 63px;
368          border: 1px solid #CACACA;
369          padding: 19px 0 18px 0;
370          text-align: center;
371         margin-bottom: 15px;
372      }
373 
374      .t-one p{
375         font: 14px 宋体;
376 
377      }
378     
379      .right-p{
380         width: 220px;
381         height: 142px;
382         }
383      .p1,.p2{
384         margin-top: 10px;
385         margin-bottom: 13px;
386      }
387      .money1,.number{
388         color: red;
389         font-weight: 700;
390      }
391      .p3{
392         margin-top:23px; 
393      }
394      .money2{
395         text-decoration: line-through;
396      }
397      .c-linee{
398         margin: 14px 0px;
399         height: 1px;
400         background: #eee;
401      }
402      .light{
403         margin: 10px 7px 10px;
404         height: 75px;
405         color: #999;
406      }
407      .light img{
408         float: left;
409         margin-right: 7px;
410      }
411      .art .r-pro ul{
412         margin-top:97px;
413      }
414 /* 友情赞助 */
415     .flink{
416         margin-top: 10px;
417         height: 100px;
418         border-top: 1px solid #eee; 
419         border-bottom: 3px solid #eee;
420     }
421     .txt-flink{
422         float: left;
423         width:60px  ;
424         height: 37px ;
425         
426     }
427     .flink li{
428         float: left;
429         padding:0 4px;
430         margin-bottom: 15px;
431     }
432     .flink-con{
433         margin-top: 30px;
434     }
435 /* 关于我们 */
436      .copyright{
437         text-align: center;
438      }
439         .copyright ul{
440             width: 690px;
441             margin: 0 auto;
442         }
443         .copyright li{
444             float: left;
445             padding: 0 10px;
446             border-right: 1px solid #eee;
447             margin-top: 15px;
448         }
449         .copyright .p1{
450             margin-top: 25px;
451             margin-bottom: 10px;
452         }

---恢复内容结束---

posted @ 2017-03-04 00:57 明明明明明明明明阅读(299) 评论(0) 编辑收藏举报

刷新页面返回顶部

CSS -- 练习（待续优化）

公告