淘宝店铺装修：首页导航CSS代码修改教程（中）

引接上期一篇的文章：淘宝店铺装修之导航CSS代码修改教程（上），下面还有通过更多的CSS代码实现淘宝店铺导航调整。

6.其他分类：一级导航设置

类名

按钮类名：.skin-box-bd.menu-list.menu{}

按钮链接类名：.skin-box-bd.menu-list.menu.link{}

文字类名：.skin-box-bd.menu-list.menu.link.title{}

图标类名（只有二级分类时有）：.skin-box-bd.menu-list.menu.link.popup-icon{}

激活后的链接类名（如果当前位置是首页，则首页按钮就是激活项）：.skin-box-bd.menu-list.menu-selected.link{}

激活后的文字类名：.skin-box-bd.menu-list.menu-selected.link.title{}

属性

float：设置浮动，用于块与块之间向左或向右排列

line-height：设置文字行间距

font-family：设置字体

font-size：设置文字大小

font-weight：设置粗体（bold为粗其他属性百度查看即可）

color：设置文字颜色

代码如下

.skin-box-bd.menu-list.menu{width:auto;height:30px;margin:0px;padding:0px;display:block;background:none;border:none;}

设置按钮宽度自适应，设置高度，内外边距清零，按块显示（因为是li标签），去掉背景和描边

.skin-box-bd.menu-list.menu.link{width:auto;height:30px;margin:020px;padding:0px;border:none;display:block;background:none;}

按钮链接设置宽高，外边距清零，由于按钮之间需要间隔，这个时候可以通过margin设置左右两边内边距各20像素，同样按块显示，清除描边及背景

.skin-box-bd.menu-list.menu.link.title{width:auto;height:30px;margin:0px;padding:0px;display:block;float:left;line-height:30px;font-family:"微软雅黑";font-size:12px;font-weight:bold;color:#fff;}

文字设置通过display：block将文字变为块显示，这样就可以用float属性进行左靠，因为有图标在，这个设置时必须的

.skin-box-bd.menu-list.menu.link.popup-icon{width:5px;height:30px;margin:0px;margin-left:5px;padding:0px;display:block;float:left;background:no-repeaturl(图片);}

图标设置与文字设置相同，用display：block变为块用float属性靠在文字后方，设置素材图片

效果如下

下面设置鼠标滑过时的变化

.skin-box-bd.menu-list.menu:hover{background:#111;}

鼠标滑过按钮时，按钮背景从隐藏变为有颜色

.skin-box-bd.menu-list.menu:hover.link.title{color:#ffd98d;}

鼠标滑过时，文字颜色改变

.skin-box-bd.menu-list.menu:hover.link.popup-icon{background-position:0px-30px;}

鼠标滑过时，图标素材图向上移动30像素，从而显示素材下半部分图片

效果如下

下面设置激活后的按钮

.skin-box-bd.menu-list.menu-selected.link.title{color:#ffd98d;}

激活后只改变了文字的颜色，这个部分只有发布之后才能生效，预览时无法查看

7.设置二级分类背景

类名

二级导航外边框类名：.popup-content{}

代码如下

.popup-content{border:none;width:190px;}

统一设置其他分类和所有分类的二级导航的宽度及描边

8.其他分类：二级导航

类名

外边框类名：.menu-popup-cats{}

单个项类名：.menu-popup-cats.sub-cat{}

文字类名：.menu-popup-cats.sub-cat.cat-name{}

代码如下

.menu-popup-cats{width:190px;height:auto;margin:0px;padding:0px;display:block;}

设置外边框的宽度为190像素，高度通过auto设置为自适应

.menu-popup-cats.sub-cat{width:190px;height:30px;margin:0px;padding:0px;display:block;background:#111;}

单个项的宽度同样设置为190像素，高度设置每个按钮为30像素，清零内外边距，设置背景色

.menu-popup-cats.sub-cat.cat-name{width:auto;height:30px;margin:0px0px0px10px;padding:0px;display:block;float:left;line-height:30px;font-family:"微软雅黑";font-size:12px;color:#fff;}

字体宽度设置为自适应，关键点事margin属性，即内边距，内边距离左侧相差10像素，这样就能与其他分类一级导航文字对齐了

效果如下

现在设置鼠标划过时的变化

.menu-popup-cats.sub-cat:hover{background:#444;}

设置鼠标滑过时，单个项的背景颜色

.menu-popup-cats.sub-cat:hover.cat-name{font-weight:bold;color:#ffd98d;}

设置鼠标滑过时，文字加粗变色

效果如下

9.所有分类：二级导航

类名

外边框类名：.all-cats-popup{}

弹出部分类名：.all-cats-popup.popup-inner{}

二级导航外边框类名：.all-cats-popup.popup-inner.cats-tree{}

单个项类名：.all-cats-popup.popup-inner.cats-tree.fst-cat{}

无子集的按钮链接：.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd{}

有子集的按钮链接：.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children{}

文字：.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd.fst-cat-name{}

图标：.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children.fst-cat-icon{}

代码如下

.all-cats-popup{width:190px;height:auto;margin:0px;padding:0px;background:#111;}

设置外边框宽高，去掉内外边距，添加背景色

.all-cats-popup.popup-inner{width:190px;height:auto;margin:0px;padding:0px;}

.all-cats-popup.popup-inner.cats-tree{width:190px;height:auto;margin:0px;padding:0px;display:block;}

弹出部分及二级导航外边框同样设置宽高，去掉内外边距

.all-cats-popup.popup-inner.cats-tree.fst-cat{width:190px;height:30px;margin:0px;padding:0px;display:block;background:none;border:none;}

单个项设置时在设置宽高及内外边距的同时，去掉背景，去掉描边

.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd{width:190px;height:30px;margin:0px;padding:0px;display:block;background:none;}

链接部分同上设置，必须按块显示（display：block）

.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd.fst-cat-name{width:170px;height:30px;margin:0px0px0px15px;padding:0px;display:block;float:left;line-height:30px;font-family:"微软雅黑";font-size:12px;color:#fff;}

文字设置时，设置按块显示，向左对齐（float：left），同时由于要给图标预留位置，因为宽度设置为170像素，文字与所有分类一级导航对齐，故此左边距设置15像素（margin：0px0px0px15px）

.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children.fst-cat-icon{width:5px;height:30px;margin:0px5px0px0px;padding:0px;display:block;float:right;background:no-repeaturl(图片);}

图标使用素材作为背景，设置不平铺，设置好宽高，这回是右对齐（float：right），因为要与所有分类一级导航的图标对齐，故右边距设置5像素（margin:0px5px0px0px）

效果如下

下面设置鼠标滑过时的样式

.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd:hover{background:#444;}

当鼠标划过时，背景颜色变化，可以设置在链接部分

.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd:hover.fst-cat-name{font-weight:bold;color:#ffd98d;}

文字部分在鼠标划过时会加粗变色

.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children:hover.fst-cat-icon{background-position:0px-30px;}

图标则是在鼠标划过时，背景图片向上移动30像素，神似图标变色

效果如下