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

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

《原创淘宝新旺铺导航栏装修代码图文详解.docx》由会员分享，可在线阅读，更多相关《原创淘宝新旺铺导航栏装修代码图文详解.docx（10页珍藏版）》请在冰豆网上搜索。

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

第一部分：

导航条背景色的设置

（该处我们全部用黑色和红色）

前言：

一：

用纯色填充

①修改导航链接文字的背景色

.skin-box-bd.link{background:

#000000;}

如果想让“所有分类”和“首页”的背景色不同

1、首页/店铺动态/其它导航类目的背景色，这里设为红色*/

.skin-box-bd.menu-list.link{background:

red;}

2、所有分类的背景色（最左边的），设为红色

.all-cats.link{background:

red;}

②修改整个导航的背景色

.skin-box-bd.menu-list{background:

#000000;}

到这里大家会发现导航右边会有一缺口，我也不知道是啥东西，不管它下一个代码补上。

③修补导航右侧缺口

.skin-box-bd{background:

#000000;}

二：

用背景图填充

导航栏用背景图（以下三个代码要一起用）

①号代码

.skin-box-bd.link{background:

url（图片地址）;}

②号代码

.skin-box-bd.menu-list{background:

url（图片地址）;}

用③号代码修补一下

.skin-box-bd{background:

url（图片地址）;}

三张图片都是一样的哦，用同一张图片哦！

第二部分：

静态文字和分隔线的设置

①“所有分类”以外文字的代码（即首页/店铺动态/其它导航类目的文字）

.menu-list.menu.title{color:

#颜色代码;font-size:

字号px;}

②“所有分类”文字代码

.all-cats.link.title{color:

#颜色代码;font-size:

字号px;}

以下代码的解释，红色为其对应的部分

修改字体：

.menu-list.menu.title{color:

#FFFFFF;font-size:

15px;font-family:

"黑体";}

字体加粗：

.menu-list.menu.title{font-family:

"方正行黑简体";font-size:

18px;color:

#00FF00;font-weight:

bold;}

不过，字体是不可以乱搞的！

要选择网页常用的，比如宋体，仿宋，黑体，一般改个黑体就足够醒目的啦！

字号一般12到20之间。

要提醒一点，这里如果修改了颜色，那么“鼠标经过”就不会再变色了哦！

不喜欢的可以把color:

#XXXXXX干掉。

③所有分类后面的分隔线代码：

.all-cats.link{border-color:

#颜色代码}

首页等分类的右边的分隔线颜色，设为白色*/

.menu-list.menu{border-color:

white;}

④二级分类文字代码：

.popup-content.cats-tree.fst-cat.cat-name{font-size:

字号;color:

#颜色代码;font-weight:

bold/bolder/normal;}

（如果三级文字没代码，那么会和二级文字一样！

）（这条代码仅修改所有分类下的二级类目文字颜色和字号等，不对后面的二级类目产生影响，如下图所示，这条代码对“风扇”下的类目不产生影响，风扇类目下二级类目依旧为默认字号）

如果需要其他导航的二级分类和所有分类下的二级分类一致，那么需要借用下面的代码

.popup-content.cat-name{font-size:

字号;color:

#颜色代码;font-weight:

bold/bolder/normal;}

这样就一致了！

⑤二级分类背景代码：

.popup-content{background:

#颜色代码}

⑥第一种：

三级分类文字代码（除去“所有宝贝”分类）如下，这里字色设为黄色

.popup-content.cats-tree.snd-pop-inner.cat-name{font-size:

字号;color:

#颜色代码;font-weight:

bold/bolder/normal;}

第二种：

三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体颜色！

如下

.popup-content .cats-tree .snd-pop-inner{font-size:

字号px;color:

#颜色;} 

⑦三级分类背景代码：

.popup-content.cats-tree.snd-pop-inner{background:

#颜色代码}

第三部分：

互动部分的设置

（背景变换部分）

1鼠标滑过首页/店铺动态/其它导航类目变换背景色，这设为黑色

.menu-list.menu-hover.link{background:

#000000;}

②鼠标滑过所有分类（最左边那个）变换背景色，这同样设为黑色

.all-cats-hover.link{background:

#000000;}

③鼠标滑过所有分类下的二级分类变换背景色，这设为黑色

.popup-content.cats-tree.cat-hd-hover{background:

#000000;}

④鼠标滑过所有分类下的三级分类变换背景色，这设为黄色

.popup-content.cats-tree.snd-cat-hd-hover{background:

yellow;}

⑤鼠标滑过导航类目下的宝贝分类变换背景色，这设为蓝色（这条代码是为首页后面的“宝贝分类（该处为风扇这一类目）”服务的，不对“所有分类”的二级，三级产生影响，看下图对比）

.menu-popup-cats.sub-cat-hover{background:

blue;}

所有分类下的类目都处于默认状态

只对其他导航栏的二级分类产生影响

第四部分：

互动部分的设置

（文字部分）

①鼠标滑过首页/店铺动态/其它导航类目变换文字颜色，这设为红色

.menu-list.menu-hover.title{color:

red;}

②鼠标滑过所有分类（最左边那个）变换文字颜色，这同样设为红色*/

.all-cats-hover.link.title{color:

red;}

③鼠标滑过导航类目下的宝贝分类变换文字颜色，这设为红色

.menu-popup-cats.sub-cat-hover.cat-name{color:

red;}

④鼠标滑过所有分类下的二级分类变换文字颜色，这设为红色*/

.popup-content.cat-hd-hover.cat-name{color:

red;}

“所有宝贝”鼠标划过后，字色变成红色，三级分类保持默认字色

这里需要提醒的是，设置了这条代码之后，如果不设置三级分类的字色，那么三级分类（除“所有宝贝”后面的三级分类以外）跟二级分类显示同样的字色。

如下图

⑤鼠标滑过所有分类下的三级分类变换文字颜色，这设为红色*/

.popup-content.cats-tree.snd-cat-hd-hover.cat-name{color:

red;}

在同时使用了二级分类，三级分类字色变换以后，会是什么效果呢，即，同时使用以上两条代码的效果是什么样？

我们来试一下（该处二级红色，三级黄色）

.popup-content.cat-hd-hover.cat-name{color:

red;}

.popup-content.cats-tree.snd-cat-hd-hover.cat-name{color:

yellow;}

我们看到二级分类颜色的设置，一定会影响到三级分类的字体颜色，所以大家要小心了（这部分还是默认白色的好看）

注意：

这样做你的导航完成的差不多了，但是发布之后你如果发现字体的背景色块有问题，只有文字下方才有色块，比如“首页”，只有“首页”两个字下面有颜色，其它有些四个字的就四个字有，这样很影响美观！

所以我们还要加上两条代码

.skin-box-bd.menu-list.menu-selected.link{background:

#000000;}

 .skin-box-bd.menu-list.menu-selected.link.title{background:

#000000;}

亲，如果有什么装修上的问题，可以到