zoukankan      html  css  js  c++  java
  • 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           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         }

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

    作者:明明
    出处: http://www.cnblogs.com/mingm/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意,必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

  • 相关阅读:
    IE6 PNG透明的简单方法
    float转int没有所谓的四舍五入
    点链接切换图片
    在受虐中成长--2009.12.18
    javascript构造弹出div 并可关闭--待修改的
    JavaScript里面的几个true or false
    2010新年要有一个新的开始
    与技术无关的书单--你可以笑着说有些是“精神鸦片”
    openlayers参考网页
    javac mac 终端乱码
  • 原文地址:https://www.cnblogs.com/mingm/p/6499062.html
Copyright © 2011-2022 走看看