1 

html代码：

     
        
      
            
       
国际大牌◆
            
       
国妆名牌◆
            
       
清洁用品◆
            
       
男士精品
        
      
        
      
            
       
                
                    
       
            
       
                
                    
       
            
       
                
                    
       
            
       
                
                    
       
        
      
    
     

 

css代码：

*{            margin: 0;            padding: 0;}        .wrapper{            width: 1000px;            height: 475px;            margin: 0 auto;            margin-top: 100px;        }        .tab{            border:1px solid #ddd;            border-bottom: 0;            height: 36px;            width: 320px;        }        .tab li{            list-style: none;            float: left;            width: 80px;            height: 34px;            line-height: 34px;            text-align: center;            cursor:pointer;            border-top: 4px solid #fff;            position: relative;        }        .tab span{            position: absolute;            right: 0;            top: 10px;            background: #ddd;            width: 1px;            height: 14px;            overflow: hidden;        }        .products{            width: 1002px;            border:1px solid #ddd;            height: 476px;        }        .products  .main{            float: left;            display: none;        }        .products  .main.selected{            display: block;        }        .tab li.active{            border-color:red;            border-bottom: 0;        }