品优购 楼层区 floor

设计

floor.png

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

• 上模块 box_hd
• 下模块 box_bd

  

    
头部
    
主体
  

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

box_hd

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

      

        
家用电器
        

          

            
热门|
            
大家电|
            
生活电器|
            
厨房电器|
            
个护健康|
            
应季电器|
            
空气/净水|
            
新奇特|
            
高端电器
          
        
      

.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，加入底边框

      

        

          

            

              

                
节能补贴
                
4K电视
                
空气净化器
                
IH电饭煲
                
滚筒洗衣机
                
电热水器
              
              
                
              
            
            

              
                
              
            
            

              
                
              
              
                
              
            
            

              
                
              
            
            

              
                
              
              
                
              
            
          
        
      

.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;
}