2016新编【原创】2012淘宝新旺铺导航栏装修代码图文详解.doc

第一部分：导航条背景色的设置 （该处我们全部用黑色和红色） 前言： 一：用纯色填充 ①修改导航的背景色.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{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:#颜色代码} 第三部分：互动部分的设置 （背景变换部分） 鼠标滑过首页/店铺动态/其它导航类目变换背景色，这设为黑色 .menu-list .menu-hover .link{background:#000000;} ②鼠标滑过所有分类（最左边那个）变换背景色，这同样设为黑色 .all-cats-hover .link{background:#000000;} ③鼠标滑过所有分类下的二级分类变换背景色，这设为黑色 .popup-content .cats-tree .cat-hd-hover{background:#000000;} ④鼠标滑过所有分类下