【旺铺2012分享】导航CSS代码使用修改技巧！

 

 

　　最近把店铺从新装修了一次。旺铺2012的导航较以前有很大的改进。固定导航位置，保证买家能够在店铺里随意跳转回到首页，避免了之前“迷路”的现象。并且，导航还开放了css装修功能，能够用css代码，装修出超炫的效果！

 

如今就把一些简单实用的代码写在下方，绝对干货！！！

 

必看：

　　一、有问题请在帖子上留言，咱们有空会免费帮你解答！
　　二、要是你必需要和再旺旺上和我一对一讨论装修的问题，那请先到我店铺购买至少一件宝贝，我晚上9点后会在线跟你一块儿讨论问题，可是绝对不是说能够百分百就能够帮到你解决问题！
　　三、请相信咱们作的教程已经考虑到大部分的问题，多去看几眼，不要问一些帖子里有答案的问题，还有也能够多多看看留言，通常你遇到的问题别人也有可能已经遇到了，能够参考我给他们的回答!

　　四、真的不必花钱来向我提问问题，我也只是想你们不要在旺旺提问而已，并不是为了利益！由于大家在这里提问我同样是会回答的！
　　请理解，谈话到此为止！

 

没作任何修改的导航是这样的

 

 

 

 

1、首先咱们进入到店铺的装修页面，将鼠标放在导航上面会出现“编辑”字样，单击，如图

选择“显示设置”选项卡

 

 

 

 

1.修改导航分类下面的背景色，代码以下：

.skin-box-bd .link{background:#000000;}

效果以下

--------------------------------

默认是黑色的，若是你要别的颜色，只要修改#000000就能够了，颜色对照表地址

http://www.114la.com/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;}

字外+字里=所有！

这样就完整了

 

好了，以上就是个人淘宝店里的导航里用的全部代码，下面再给你们一些别的代码！！

 

 

 

 

2、下面红色部分为能够修改的，颜色代码你们很熟悉了，字号就是字体的大小，在网页中，字体大小通常是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.三级分类文字代码（包括“全部宝贝”分类字体大小）这样就没法改变字体颜色，咱们会继续完善该代码！以下
.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;} 

 

 

9.三级分类背景代码：

.popup-content .cats-tree .snd-pop-inner{background:#000000;}

 

 

 

 

10.一级导航分类（除去“全部宝贝”分类）分隔线颜色代码以下：

.menu-list .menu{border-color:#000000;}

 

11.一级导航“全部宝贝”分类分隔线颜色代码以下：

.all-cats .link{border-color:#000000;}

 

12.一级导航分类的宽度修改代码以下：

.menu-list .menu{background:#颜色;margin:0;padding:0px 增长的宽度px;}

 

 

 

13.鼠标滑过一级分类导航文字变换背景色代码以下：

.menu-list .menu-hover .link{background:#000000;}

 

 

14.鼠标滑过一级分类导航文字变换颜色代码以下：

.menu-list .menu-hover .link .title{color:#FFFFFF;}

 

 

 

 

15.鼠标滑过二级分类导航文字变换背景色代码以下：

.popup-content .cats-tree .cat-hd-hover{background:#000000;}

  

 

16.鼠标滑过二级分类导航文字变换颜色代码以下：

.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}

 

 

 

 

17.鼠标滑过三级分类导航文字变换背景色代码以下：

.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}

 

 

18.二级分类上加空间代码以下：

.popup-content .cats-tree{margin:0 0 50px 0;}

 

 

19.修改“全部宝贝”右边小图标代码以下：

.all-cats .link .popup-icon{background:url(图片链接);}

 

 

20.修改二级分类右侧图标代码以下（有三级分类才会显示）：

.popup-content .cats-tree .fst-cat-icon{background:url(图片链接);}

 

22.在三级分类前加上小块白色代码以下：

.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}

好了，我简单的导航修改技巧就到这里了，以上效果都是用白色或黑色作给你们看，是为了你们能更好的看清楚效果，若是上面有些看到是全白的，那是由于字体颜色和背景颜色同样才变成全白的，修改了背景你们再修改字体颜色就能够了！但愿你们均可以作出本身喜欢的导航！

 

 

3、关于店招和导航两侧的修改！

　　这里修改好，跟导航和店招结合在一块儿会更加完美！

修改方式以下：在店铺装修页面的左上方有个“装修”，将鼠标放在上面会出现下拉菜单，选择“样式菜单”

单击左侧的“背景设置”

　　这里有两个选项卡，分别是“页头设置”和“页面设置”。

所谓页头，其实就是导航以上（包括导航）的部分，而页面就是导航如下的部分了！这里能够用纯颜色设置，也能够用图片设置，咱们要结合导航，确定就用图片咯！

 

　　固然你想要更加个性的话，你也能够给每个页面都作一个不同的效果，只要单击这里，下拉选择相应页面就能够了！

 

 

 

4、最后还有一个发布不显示效果的解决方法！

导航修改好代码以后，预览有效果，可是发布以后仍是显示原来的效果，没有任何变化！

解决的方法是在你修改好代码以后，预览有效果了，以后就关闭“店铺装修”页面，以后从新打开再点“发布”就会显示效果了！

若是你不知道哪一个是“店铺装修”页面，那就直接关闭浏览器，从新进“店铺装修”那个点“发布”就OK咯！

 

 

注意：

　　1.若是在整修过程当中遇到任何问题能够跟帖留言，咱们有空会尽力帮你处理！

　　2.因为旺旺为工做所需，全部发到旺旺的信息都不会给予理睬，请谅解！谢谢支持！

祝全部店长生意兴隆！

东莞飞浦照明