HTML商品分类页面案例

下面是一个商品分类的案例分享，在做这部分的时候，小编可能用的方式有点麻烦了，其实除了小编的这种div盒子模型之外，另一种也可以用ul和li来做，第二种方法可能更好一点，比小编这样做的比较简便一点。

小编的思路是用div盒子和ul以及li结合在一起来做，此处注意最后一个里面再加一个类将底部的虚线边框取消一下，这样就可以了。

    
    
    
    
    


    
        
            
            
                酒水、饮料
            
        
        
            
            
                进口食品
            
        
        
            
            
                休闲零食
            
        
        
            
            
                地方特产
            
        
        
            
            
                保健、冲调
            
        
        
            
            
                粮油、生鲜
            
        
        
            
            
                美容洗护
            
        
        
            
            
                清洁洗涤
            
        
        
            
            
                母婴、纸品
            
        
        
            
            
                家居百货
            
        
    

下面是页面的展示效果：

在这个案例里面依然引用的是ul和li

无序列表是一个项目的列表，项目默认使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 标签。每个列表项始于

 大家在引用时注意将自己的图片地址修改一下，否则可能出现不了和小编一样的效果了