CSS-家用电器模块

没有动态的日子，都是在搬烫手的砖。一个人最美好的状态，那一定是知道自己想要什么，并且为之全力以赴。

布局：

头部

文字左浮动，右侧盒子右浮动，右侧盒子内部的li标签左浮动
a标签内部的|通过 margin-right 挤开

身体:

设置5个div盒子
第一个盒子 上面li左浮动，下面直接插入img标签
图片防止大小不合适，可以先给img设置一个大小

小知识：

如果a标签内部盒子有宽度，需要给a标签设置成块级元素。

<div class="jiadian_hd">
                 <h3>王子喜欢的明星</h3>
                 <div class="tab_list">
                     <ul>
                         <li><a href="#" class="style_red">热门</a>|</li>
                         <li><a href="#">大家电</a>|</li>
                         <li><a href="#">生活电器</a>|</li>
                         <li><a href="#">厨房电器</a>|</li>
                         <li><a href="#">个护健康</a>|</li>
                         <li><a href="#">空气、净水</a>|</li>
                         <li><a href="#">新产品</a>|</li>
                         <li><a href="#">王子热推</a></li>
                     </ul>
                 </div>
             </div>
             <div class="jiadian_bd">
                 <div class="tab_content">
                     <div class="tab_list_item">
                         <div class="col_210">
                             <ul>
                                 <li><a href="#">王子帅帅哦</a></li>
                                 <li><a href="#">王子帅帅哦</a></li>
                                 <li><a href="#">王子帅帅哦</a></li>
                                 <li><a href="#">王子帅帅哦</a></li>
                                 <li><a href="#">王子帅帅哦</a></li>
                                 <li><a href="#">王子帅帅哦</a></li>
                             </ul>
                             <div>
                                 <a href="#">
                                    <img src="upload/jialun.jpg" alt="">
                                 </a>
                             </div>
                         </div>
                         <div class="col_329">
                             <a href="#">
                                 <img src="upload/jialun2.jpg" alt="">
                             </a>
                         </div>
                         <div class="col_221">
                             <a href="#">
                                 <img src="upload/jinyi.jpg" alt="">
                             </a>
                         </div>
                         <div class="col_221">
                             <a href="#">
                                 <img src="upload/jinyi2.jpg" alt="">
                             </a>
                         </div>
                         <div class="col_219">
                             <a href="#">
                                 <img src="upload/jinyi3.jpg" alt="">
                             </a>
                         </div>
                     </div>
                 </div>
             </div>

/*家电模块开始*/
.jiadian_hd{
    height: 30px;
    border-bottom: 2px solid #C81623;
}
.floor .w{
    margin-top: 30px;
}
.jiadian_hd h3{
    float: left;
    font-size: 18px;
    color: #C81623;
    font-weight: 400;

}
.jiadian_hd .tab_list{
    float: right;
    line-height: 30px;
}
.jiadian_hd .tab_list ul li{
    float: left;
}
.jiadian_hd .tab_list ul li a {
    padding: 0 25px;
}
.jiadian_bd{
    height: 361px;
    /*background-color: pink;*/
}
.tab_list_item div{
    float: left;
    height: 361px;
}
.col_210{
    width: 210px;
    text-align: center;
    background-color: #f9f9f9;
}
.col_210 ul li{
    float: left;
    height: 34px;
    width: 85px;
    border-bottom: 1px solid #cccccc;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
}
.col_210 a img{
    width: 160px;
    height: 245px;
    margin-left: 23px;
    margin-top: 5px;
}
.col_210 ul{
    padding-left: 12px;
}
.col_329{
    width: 329px;
}
.col_329 img{
    width: 320px;
    height: 360px;
}
.col_221{
    width: 221px;
}
.col_219{
    width: 219px;
}