淘宝导航建筑工程装修css全解 超赞超详细.pdfVIP

一、首先我们进入到店铺的装修页面，将鼠标放在导航上面会出现 “编辑”字 样，单击，如图 选择 “显示设置”选项卡 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(图片链接);} 这样做你的导航完成的差不多了，但是发布之后你会发现字体的背景色块有问题， 只有文字下方才有色块，比如 “首页”，只有 “首页”两个字下面有颜色，其它 有些四个字的就四个字有，这样很影响美观！ 所以我们还要加上两条代码 4.字外： .skin-box-bd .menu-list .menu-selected .link{background:#000000;} 5.字里： .skin-box-bd .menu-list .menu-selected .link .title{background:#000000; } 字外+字里=全部！ 这样就完整了 好了，以上就是我的淘宝店里的导航里用的所有代码，下面再给大家一些别的 代码！！ 二、下面红色部分为可以修改的，颜色代码大家很熟悉了，字号就是字体的大 小，在网页中，字体大小一般是 14 到 20 左右，根据自己的需要设定吧，直接 填写数字就 OK 了！ 1.导航背景色代码（除去“所有分类”）如下： .menu-list .link{background:#000000;} 2.导航栏文字（除去“所有分类”）如下： .menu-list .menu .title{color:#颜色代码;font-size:字号 px;} 3. “所有分类”的背景色代码如下： .all-cats .link{background:#000000;} 4. “所有分类”的文字代码如下： .all-cats .link .title{color:#颜色代码;font-size:字号 px;} 　　最新代码，解决字体改大后导航右侧消失的情况！ 代码如下： .all-cats .link .title{font-size:字号 px;}.all-cats .link {background:#3BAFFF;margin:0;padding:0px 3px;} 　　字号最大为 21，继续变大右侧导航将消失！该代码还不是很完善，我们会继续研究！ 5.二级分类文字代码如下： .popup-content .cats-tree .fst-cat .cat-name{font-size:字号 px;color:# 颜色代码;font-weight:bold/bolder/normal;} 原来效果 修改后效果 6.二级分类背景代码如下： .popup-content{background:#000000;} 7.三级分类文字代码（除去“所有宝贝”分类）如下 .popup-content .cats-tree .snd-pop-inner{font-size:字号 px;color:#颜色代 码;font-weight:bold/bolder/normal;} 原来效果 修改后效果 8.三级分类文字代码（包括“所有宝贝”分类