推荐模块

大子recom推荐模块
recommend
里面包含2个盒子，浮动即可
1号子recom-hd
2号盒子recom-bd ,注意里面的小竖线

• html

<!-- 推荐模块 recom start-->
  <div class="w recom">
    <div class="recom_hd fl">
      <img src="./images/recom.png" alt="">
    </div>
    <div class="recom_bd fl">
      <ul>
        <li><img src="./upload/recom_03.jpg" alt=""></li>
        <li><img src="./upload/recom_03.jpg" alt=""></li>
        <li><img src="./upload/recom_03.jpg" alt=""></li>
        <li><img src="./upload/recom_03.jpg" alt=""></li>
      </ul>
    </div>
  </div>

  <!-- 推荐模块 recom end -->

• index.css

/* 推荐模块 recom start */

.recom {
    height: 163px;
    margin-top: 12px;
    background-color: #ebebeb;
}

.recom_hd {
    height: 163px;
    width: 205px;
    background-color: #5c5251;
    text-align: center;
    padding-top: 30px;
}

.recom_bd ul li {
    position: relative;
    float: left;
}

.recom_bd ul li img {
    width: 248px;
    height: 163px;
}

.recom_bd ul li:nth-child(-n+3)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

效果图：

楼层区floor

注意这个floor ,不要给高度,内容有多少,多少.
第一楼是家用电器模块:面包含两个模块
1 号盒子box _hd ,给一个高度 ,有个下边框 ,里面分为左右2个盒子
box_bd,不要给高度

tab_list的内容要和tab_content中的内容对应，所以tab_list有多少个栏目，tab_content就要对应多少少个盒子，点击一个栏目对应一个盒子。其余盒子不显示。

• index.html

<div class="floor">
    <!-- 1楼家用电器楼层 -->
    <div class="jiadian w">
      <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>
      <div class="box_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>
              <a href="#"><img src="./upload/floor-1-1.png" alt="" /></a>
            </div>

            <div class="col_329">
              <a href="#"><img src="./upload/floor-1-b01.png" alt=" " /></a>
            </div>

            <div class="col_221"><a href="#" class="bb"><img src="./upload//floor-1-2.png" alt=""></a>
              <a href="#"><img src="./upload//floor-1-3.png" alt=""></a>
            </div>

            <div class="col_221">
              <a href="#"><img src="./upload/floor-1-4.png" alt=""></a>
            </div>

            <div class="col_219">
              <a href="#" class="bb"> <img src="./upload/floor-1-5.png" alt=""></a>
              <a href="#"><img src="./upload/floor-1-6.png" alt=""></a>
            </div>

          </div>
        </div>
      </div>
    </div>
    <!-- 2楼手机通讯楼层 -->
    <div class="jiadian w">
      <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>
      <div class="box_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>
              <a href="#"><img src="./upload/floor-1-1.png" alt="" /></a>
            </div>

            <div class="col_329">
              <a href="#"><img src="./upload/floor-1-b01.png" alt=" " /></a>
            </div>

            <div class="col_221"><a href="#" class="bb"><img src="./upload//floor-1-2.png" alt=""></a>
              <a href="#"><img src="./upload//floor-1-3.png" alt=""></a>
            </div>

            <div class="col_221">
              <a href="#"><img src="./upload/floor-1-4.png" alt=""></a>
            </div>

            <div class="col_219">
              <a href="#" class="bb"> <img src="./upload/floor-1-5.png" alt=""></a>
              <a href="#"><img src="./upload/floor-1-6.png" alt=""></a>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- 楼层区  floor end -->

• index.css

/* 楼层区 */

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

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

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

.tab_list ul li {
    float: left;
}

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

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

.box_bd {
    height: 361px;
}

.tab_list_item>div {
    float: left;
    height: 361px;
}

.col_210 {
    width: 210px;
    background-color: #f9f9f9;
}

.col_210 ul {
    padding: left 12px;
}

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

.col_329 {
    width: 329px;
}

.col_221 {
    width: 221px;
    border-right: 1px solid #ccc;
}

.col_219 {
    width: 219px;
}

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