前端联系项目——品优购 Day8 floor楼层区制作

 整体效果：

 1.整体结构分析

       floor楼层区就是制作各类商品的区域，从一层开始，一直到n层，通常旁边会有一个竖框（称作电梯）用于选择区域，如京东的（下图），这个在学会JS后会做。现在只用HTML和CSS做出楼层区即可。 

       整体是一个大盒子（楼层区），大盒子里面有多个楼层（都是版心），每个楼层分为上下两部分——上面是box_hd，下面是box_bd。其中box_hd需要给出高度，而box_bd由于元素不确定，内容有多少算多少，因此不需要给高度。

.floor .jiadian {
    margin-top: 30px;
}

 与上层盒子拉开距离。

2.家电模块大盒子box_hd制作

    （1）结构分析

       很明显左边一个盒子（可以是标题h3），右边是ul li a模式，两边用浮动隔开，下边是一个大盒子的边框。

            <div class="box_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>
                        <li><a href="#">高端电器</a>|</li>
                        <li><a href="#">新上市</a></li>
                    </ul>
                </div>
            </div>

.box_hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
}

（2）左侧h3的CSS代码

.box_hd h3 {
    float: left;
    color: #c81623;
    font-size: 18px;
    font-weight: 400;
}

       这里注意一下font-weight，因为h3会把字体加粗，如果想去掉加粗的话，就需要把font-weight修改为400（400为正常，700为加粗）。

（3）右侧tab_list盒子的CSS代码

.tab_list {
    float: right;
    line-height: 30px;
}

      这里解释一下为什么类名起为：tab_list——因为楼层区里的模块实际上是选项卡，有一个tab_list和一个tab_content，然后根据鼠标在tab_list放置的位置来改变tab_content的内容，这个需要使用JS来制作。因此只要是这种"选项卡"模式的，都会有tab_list和tab_content。

（4）tab_list盒子制作

 类似导航栏的制作（ul li a），但这次使用不同的方式：直接用‘|’代替小竖线盒子。

 li的CSS代码：

.tab_list ul li {
    float: left;
}

 用浮动使li排在一行

  a的CSS代码：

.tab_list ul li a {
    margin: 0 15px;
}

      拉开间距（同时也与小竖线拉开了间距），注意marigin中间不加逗号，且行内元素只能加左右margin值

 

3.家电模块box_bd模块制作

（1）结构分析

       最大的盒子是box_bd，其中有tab_content（选项卡），然后tab_content里面有多个盒子。注意，图上只是选项卡的其中一面（tab_list_one），本来有多个盒子。

       tab_list_one里有五个盒子

.box_bd {
    height: 361px;
    /* background-color: pink; */
}

总的大盒子只需要给出高度即可。

.tab_list_one>div {
    float: left;
}

所有的盒子向左浮动。这里选择器选择了tab_list_one里面的div元素 

（2）tab_list_one第一个盒子

<div class="col_210">
    <ul>
        <li><a href="#">节能补贴</a></li>
        <li><a href="#">4K电视</a></li>
        <li><a href="#">空气净化器</a></li>
        <li><a href="#">IH电饭煲</a></li>
        <li><a href="#">滚筒洗衣机</a></li>
        <li><a href="#">电热水器</a></li>
    </ul>
    <a href="#"><img src="upload/floor-1-1.png"></a>
</div>

盒子的CSS代码：

.col_210 {
    width: 210px;
    height: 361px;
    background-color: white;
    text-align: center;
}

 类名是根据宽度写的。

li的CSS代码：

.col_210 ul li {
    float: left;
    width: 85px;
    height: 34px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
}

        其中需要注意的是：li的下划线的制作——先用border-bottom属性制作下划线，然后用margin-right拉开li与li的间距，给ul一个margin-left与左边拉开距离。

.col_210 ul {
    margin-left: 12px;
}

最后插入一张图片即可。 

（3）其余四个盒子

<div class="col_329">
       <a href="#"><img src="upload/pic1.jpg"></a>
</div>
<div class="col_221">
       <a href="#" class="xiahuaxian"><img src="upload/floor-1-2.png"></a>
       <a href="#"><img src="upload/floor-1-3.png"></a>
</div>
<div class="col_221">
       <a href="#"><img src="upload/floor-1-4.png"></a>
</div>
<div class="col_219">
       <a href="#" class="xiahuaxian"><img src="upload/floor-1-5.png"></a>
       <a href="#"><img src="upload/floor-1-6.png"></a>
</div>

有的插入一张图片，有的需要插入两张图片。

.col_329 {
    width: 329px;
}

.col_221 {
    width: 221px;
}

.xiahuaxian {
    display: block;
    border-bottom: 1px solid #ccc;
}

.col_219 {
    width: 219px;
}

其中需要插入两张图片的，则需要加上下划线。

a如果包含有宽度的元素（如图片等），在对a进行操作时要转化为块级元素。