品優購案例練習（三）

推薦模塊

大子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;
}