HTML+CSS 仿写淘宝商城分类导航

效果图

HTML+CSS 仿写淘宝商城分类导航_第1张图片

学会淘宝商城的分类导航以后,会发现大多数的电商网站都是这样的效果,在做其他网站时具体分析即可。

首先我们要构思整个大框架的结构:左边是全部商品分类,在这个分类中主要是用了导航列表(ul li), 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位,把这个div分成左边小分类列表,右边图片广告) 

这个分类导航其实比较简单,在我看来要重点理解相对定位,绝对定位,盒子模型,包括margin和padding的含义,以及对a标签的熟练使用。有一个小知识点就是显示与隐藏display:block;display:none;

但在具体做的时候就有很多细节需要注意,比如每个大分类后都有一个箭头,每一类都有一个斜杠,中间显示框有一个橙色的边框,以及中间字体颜色不一致,图片的大小等等,这些做起来还是很简单的,细心一点就好。

我使用的是内嵌样式,下面就是具体的代码实现(我只附了女装男装内衣的二级分类)




    
    淘!你喜欢!
    


 

你可能感兴趣的:(HTML+CSS)