原创淘宝新旺铺导航栏装修代码图文详解.docx

1、原创淘宝新旺铺导航栏装修代码图文详解第一部分：导航条背景色的设置（该处我们全部用黑色和红色）前言：一：用纯色填充修改导航链接文字的背景色.skin-box-bd .linkbackground:#000000;如果想让“所有分类”和“首页”的背景色不同1、首页/店铺动态/其它导航类目的背景色，这里设为红色 */.skin-box-bd .menu-list .linkbackground:red;2、所有分类的背景色（最左边的），设为红色.all-cats .linkbackground:red;修改整个导航的背景色.skin-box-bd .menu-listbackground:#0000

2、00;到这里大家会发现导航右边会有一缺口，我也不知道是啥东西，不管它下一个代码补上。修补导航右侧缺口.skin-box-bdbackground:#000000;二：用背景图填充导航栏用背景图（以下三个代码要一起用）号代码.skin-box-bd .linkbackground:url(图片地址);号代码.skin-box-bd .menu-listbackground:url(图片地址);用号代码修补一下.skin-box-bdbackground:url(图片地址);三张图片都是一样的哦，用同一张图片哦！第二部分：静态文字和分隔线的设置“所有分类”以外文字的代码（即首页/店铺动态/其它导航

3、类目的文字）.menu-list .menu .titlecolor:#颜色代码;font-size:字号px;“所有分类”文字代码.all-cats .link .titlecolor:#颜色代码;font-size:字号px;以下代码的解释，红色为其对应的部分修改字体：.menu-list .menu .titlecolor:#FFFFFF;font-size:15px;font-family:黑体;字体加粗：.menu-list .menu .titlefont-family: 方正行黑简体;font-size: 18px;color: #00FF00;font-weight: bold

4、;不过，字体是不可以乱搞的！要选择网页常用的，比如宋体，仿宋，黑体，一般改个黑体就足够醒目的啦！字号一般12到20之间。要提醒一点，这里如果修改了颜色，那么“鼠标经过”就不会再变色了哦！不喜欢的可以把color: #XXXXXX干掉。所有分类后面的分隔线代码：.all-cats .linkborder-color:#颜色代码首页等分类的右边的分隔线颜色，设为白色 */.menu-list .menuborder-color:white;二级分类文字代码：.popup-content .cats-tree .fst-cat .cat-namefont-size:字号;color:#颜色代码;fo

5、nt-weight:bold/bolder/normal;（如果三级文字没代码，那么会和二级文字一样！）（这条代码仅修改所有分类下的二级类目文字颜色和字号等，不对后面的二级类目产生影响，如下图所示，这条代码对“风扇”下的类目不产生影响，风扇类目下二级类目依旧为默认字号）如果需要其他导航的二级分类和所有分类下的二级分类一致，那么需要借用下面的代码.popup-content .cat-namefont-size:字号;color:#颜色代码;font-weight:bold/bolder/normal;这样就一致了！二级分类背景代码：.popup-contentbackground:#颜色代码第

6、一种：三级分类文字代码（除去“所有宝贝”分类）如下，这里字色设为黄色.popup-content .cats-tree .snd-pop-inner .cat-name font-size:字号;color:#颜色代码;font-weight:bold/bolder/normal;第二种：三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体颜色！如下.popup-content.cats-tree.snd-pop-innerfont-size:字号px;color:#颜色;三级分类背景代码：.popup-content .cats-tree .snd-pop-innerbackg

7、round:#颜色代码第三部分：互动部分的设置（背景变换部分）1 鼠标滑过首页/店铺动态/其它导航类目变换背景色，这设为黑色.menu-list .menu-hover .linkbackground:#000000;鼠标滑过所有分类（最左边那个）变换背景色，这同样设为黑色.all-cats-hover .linkbackground:#000000;鼠标滑过所有分类下的二级分类变换背景色，这设为黑色.popup-content .cats-tree .cat-hd-hoverbackground:#000000;鼠标滑过所有分类下的三级分类变换背景色，这设为黄色 .popup-content

8、 .cats-tree .snd-cat-hd-hoverbackground:yellow;鼠标滑过导航类目下的宝贝分类变换背景色，这设为蓝色（这条代码是为首页后面的“宝贝分类（该处为风扇这一类目）”服务的，不对“所有分类”的二级，三级产生影响，看下图对比）.menu-popup-cats .sub-cat-hoverbackground:blue;所有分类下的类目都处于默认状态 只对其他导航栏的二级分类产生影响第四部分：互动部分的设置（文字部分）鼠标滑过首页/店铺动态/其它导航类目变换文字颜色，这设为红色.menu-list .menu-hover .titlecolor:red;鼠标滑过

9、所有分类（最左边那个）变换文字颜色，这同样设为红色 */.all-cats-hover .link .titlecolor:red;鼠标滑过导航类目下的宝贝分类变换文字颜色，这设为红色.menu-popup-cats .sub-cat-hover .cat-namecolor:red;鼠标滑过所有分类下的二级分类变换文字颜色，这设为红色 */ .popup-content .cat-hd-hover .cat-namecolor:red;“所有宝贝”鼠标划过后，字色变成红色，三级分类保持默认字色这里需要提醒的是，设置了这条代码之后，如果不设置三级分类的字色，那么三级分类（除“所有宝贝”后面的三

10、级分类以外）跟二级分类显示同样的字色。如下图鼠标滑过所有分类下的三级分类变换文字颜色，这设为红色 */ .popup-content .cats-tree .snd-cat-hd-hover .cat-namecolor:red;在同时使用了二级分类，三级分类字色变换以后，会是什么效果呢，即，同时使用以上两条代码的效果是什么样？我们来试一下（该处二级红色，三级黄色）.popup-content .cat-hd-hover .cat-namecolor:red;.popup-content .cats-tree .snd-cat-hd-hover .cat-namecolor:yellow;我们

11、看到二级分类颜色的设置，一定会影响到三级分类的字体颜色，所以大家要小心了（这部分还是默认白色的好看）注意：这样做你的导航完成的差不多了，但是发布之后你如果发现字体的背景色块有问题，只有文字下方才有色块，比如“首页”，只有“首页”两个字下面有颜色，其它有些四个字的就四个字有，这样很影响美观！所以我们还要加上两条代码.skin-box-bd .menu-list .menu-selected .linkbackground:#000000;.skin-box-bd .menu-list .menu-selected .link .titlebackground:#000000;亲，如果有什么装修上的问题，可以到