效果图：

 

代码如下：

　　HTML：

    
             
         
     
        
      
            
       
        收藏本站
       
            
       
                
        登录                 
        注册                 
        我的订单                 
        我的收藏                 
        VIP会员俱乐部                 
        客户服务                 
        关注                 
        手机版            
       
            
       
        
      
    
     
    
     
        
      
            
       
                    
                    
       
            
       
                
                        购物车2件                        
       
            
       
                
                        
                        
        热门搜索：火龙果、瓜子            
       
            
       
        
      
    
     
    
     
        
      
            
       
                
        全部商品分类            
       
            
       
                
        首页                
        网上超市                
        水果超市                
        超级订餐                
        生活娱乐                
        研究院                
        论坛                
        换肤            
       
            
       
        
      
    
     
    
     
        
      
            
       
                
        
南方水果
                
        火龙果                
        橘子                
        荔枝            
       
            
       
                
        
北方水果
                
        苹果                
        葡萄                
        哈密瓜            
       
            
       
                
        
南方水果
                
        火龙果                
        橘子                
        荔枝            
       
            
       
                
        
北方水果
                
        苹果                
        葡萄                
        哈密瓜            
       
       
            
       
                
        热销排行榜            
       
            
       
                
        content            
       
        
      
        
      
            
       
交通>&gt汽车>&gt跑车
            
       
                
        
                    
         
                        
          您已选择：                        
          跑车                    
         
                    
         
                        
          材质：                        
          黄金                        
          白银                        
          青铜                    
         
                    
         
                        
          品牌：                        
          兰博基尼                        
          法拉利                        
          柯尼塞格                    
         
                    
         
                        
          风格：                        
          炫酷                        
          低调                        
          奢华                    
         
                
        
            
       
            
       
                
        更多选项            
       
       
            
       
                
        排序：                
        价格↓                
        销量↓                
        最新↓                
        >                
        <                
        1⁄777                
        共xx件商品            
       
            
       
                
        
                    
                         
        
                
        
                    
                         
        
                
        
                    
                         
        
                
        
                    
                         
        
                
        
                    
                         
        
                
        
                    
                         
        
                
        
                    
                         
        
                
        
                    
                         
        
                
        
                    
                         
        
                
        
                    
                         
        
            
       
        
      
    
     

 　　css：

.pg_header{
       height: 40px;background-color: #dddddd;line-height:40px;}.pg_header2{
       height: 80px;line-height: 80px;}.pg_header3{
       height: 40px;background-color: #ff0047;line-height: 40px;}.he_width{
       width: 1200px;  margin: 0 auto;}.a_head{
       display: block;text-align: center;color: aliceblue}.a_head2{
       display: inline-block;width: 80px;text-align: center;}.lit_head{
       border: 1px solid #C2C2C2;}.lit_head2{
       height: 35px;border: 1px solid #C2C2C2;background-color: #dddddd;line-height: 35px;}.lit_right{
       border: 1px solid #C2C2C2;border-top: 2px solid red;}.chose_tit{
       line-height: 40px;font-weight: bold}.lit_right2{
       border: 1px solid #C2C2C2;background-color: #E7E7E7;}.r2_word{
       display: inline-block;height: 40px;line-height: 40px;width: 70px;text-align: center;}.r2_word2{
       display: inline-block;height: 40px;line-height: 40px;color: red;width: 100px;float: right;}.r2_word3{
       display: inline-block;height: 40px;line-height: 40px;width: 30px;float: right;}