《打造个性化淘宝导航栏,装修css全解.docx

淘宝导航装修css全解（整理）首先来让我们看看一个案例，也是我按照以下CSS对导航栏部分进行编辑的最终效果。地址：/图示：采用的是彷win8的图形界面风格，没有花一分钱，个人觉得还是不错的！这是我在导航栏添加的CSS：.skin-box-bd{background:none;border:0px;}.menu-list{background:none;border:0px;}.link{background:none;border:0px;}.menu{background:none;border:0px;}.all-cats{background:none;border:0px;}.skin-box-bd .all-cats .title{color:#D37DF1;}.menu-list .menu .title{color:#D37DF1;font-size:20px;}.all-cats .link .title{color:#D37DF1;font-size:20px;}.menu-list .menu-hover .link{background:#FFFFFF;}.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#FFFFFF;}.popup-content{background:#FFFFFF;}.menu-list .menu{background:#260930;margin:0;padding:0px 10px;}.popup-content .cats-tree .cat-hd-hover{background:#D37DF1;}.popup-content .cats-tree .snd-pop-inner{background:#D37DF1;}.popup-content .cats-tree{margin:0 0 20px 0;}注：1. 其中border：0px 这个函数能让选项卡的边框和导航栏的上边框消失不见！2.如果把 黄色荧光笔加重区域复制到您的css中可以让导航栏变透明！3.background：none学过英语的同学应该知道这是无色的意思吧。一、首先我们进入到店铺的装修页面，将鼠标放在导航上面会出现“编辑”字样，单击，如图选择“显示设置”选项卡1.修改导航分类下面的背景色，代码如下：.skin-box-bd .link{background:#000000;}效果如下--------------------------------默认是黑色的，如果你要别的颜色，只要修改#000000就可以了，颜色对照表地址/other/rgb.htm--------------------------------------------------------------------------如果你想要更加个性，而不想只要简单的纯色块的话，可以自己做图片，然后连接上去，代码如下：.skin-box-bd .link{background:url(图片链接);}效果如下--------------------------------将“图片连接”换成你的图片的连接就可以了，一般都是自己做好然后上传到淘宝图片空间，然后链接就可以了！?在图片空间点击对应图片下方的“链接”按钮可以直接复制图片链接，替换到代码里就可以了！?2.修改整个导航的背景色【其实只修改了有分类之外的部分（前面我们已经修改好了分类背景），还有最右边那部分没改到，后面会有修改那里的代码，一步步跟着来就没错了！】代码如下：.skin-box-bd .menu-list{background:#000000;}效果如下--------------------------------修改颜色的方法同上--------------------------------------------------------------------------修改成图片的代码如下：.skin-box-bd .menu-list{background:url(图片链接);}?3.修改最右边留下的一小块，2里提到的，代码如下：.skin-box-bd{background:#000000;}?效果如下--------------------------------修改颜色的方法同上--------------------------------------------------------------------------修改成图片的代码如下：.skin-box-bd{background:url(图片链接);}?这样做你的导航完成的差不多了，但是发布之后你会发现字体的