品优购 楼层区 floor

设计

floor.png

注意这个floor，不能给高度，内容有多少，算多少

• 上模块 box_hd
• 下模块 box_bd

<div class="floor">
  <div class="w jiadian">
    <div class="box_hd">头部</div>
    <div class="box_bd">主体</div>
  </div>
</div>

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

box_hd

• 有高度可以不用清除浮动
• 左边h3，盒子左浮动
• 右边tab-list，右浮动，因为用到tab切换效果，所以里面要用ul和li来做

      <div class="box_hd">
        <h3>家用电器</h3>
        <div class="tab_list">
          <ul>
            <li><a class="style_red" 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;
}
.box_hd h3 {
  float: left;
  font-weight: 400;
  font-size: 18px;
  color: #c81623;
}
.box_hd .tab_list {
  float: right;
  line-height: 30px;
}
.box_hd .tab_list ul li{
  float: left;
}
.box_hd .tab_list ul li a {
  margin: 0 15px
}

box_bd

• 左边分为两部分，上面用ul li，下面插入图片，总体居中对齐
• 右边都是图片链接，将宽度单独设为类，再将部分链接设为block，加入底边框

      <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="#">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" alt="">
              </a>
            </div>
            <div class="col_320">
              <a href="#">
                <img src="./upload/pic1.jpg" alt="">
              </a>
            </div>
            <div class="col_221">
              <a href="#" class="border_bottom">
                <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="border_bottom">
                <img src="./upload/floor-1-5.png" alt="">
              </a>
              <a href="#">
                <img src="./upload/floor-1-6.png" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>

.tab_list_item>div {
  height: 361px;
  float: left;
}
.col_210 {
  width: 210px;
  text-align: center;
  background-color: #f9f9f9;
}
.col_210 ul {
  padding-left: 12px;
}
.col_210 ul li {
  margin-right: 10px;
  float: left;
  width: 85px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  border-bottom: 1px solid #ccc;
}
.col_320 {
  width: 320px;
}
.col_221 {
  width: 221px;
  border-right: 1px solid #ccc;
}
.col_219 {
  width: 219px;
}
.border_bottom {
  display: block;
  border-bottom: 1px solid #ccc;
}