CSS 淘宝导航代码集合(附使用技巧).pdfVIP

CSS 淘宝导航代码集合 （附使⽤技巧） 如今，淘宝撑起了中国电商的半边天，淘宝店铺多如⿇，淘宝竞争越来越激烈，除了 ⼤打价格 就是靠精美的店铺装修来吸引浏览者的驻⾜。淘宝导航css代码相信很多店 铺经营者都懂得，但是如何运⽤css代码做出精致的淘宝导航却是很多⼈都不清楚的， 导航对于买家来说是指路灯，这样⼀看就能出导航的重要性了。有时候看到别⼈家的 店铺导航栏好有个性，也想照着做⼀个，那么应该怎么操作呢？那么下⾯就给⼤家整 理⼀些超好⽤的淘宝css导航代码及使⽤⽅法和技巧。 让别⼈的导航栏css代码为你所⽤的⽅法 1.⾸先找到别⼈店铺的⾸页，右键单击导航栏空⽩处，查看源代码。 2.打开以后看到的代码 如果没有找到这个标识说明这是⽤sdk⾼级模版装修的，所以就没有代码了。 　　 找到这⼏个标识，这⾥就是我们要找的css⽂件。下⾯的就是我们要找的CSS⽂件。跟 着我们将它⽤浏览器打开，或者下载个notepad程序，双击打开就可以看到相应的代 码。 3.打开⽂件，点击“替换” 4 .然后复制下⾯这段代码#page#content .tshop-pbsm-shop-nav-ch 　　 粘贴进查找内容框⾥，替换为后⾯的框不要填写，直接点击全部替换按钮。那么， 这样的css代码就可以为我们所⽤了。 5.最后，我们把css代码做好后，粘贴到⾃⼰的店铺⾥，却发现分类是没有底⾊的。解 决⽅法不难，我们只需要设置⼀下页头背景就可以了。 淘宝css导航参考代码 以下⽂字内容可以⼀同复制使⽤，不会影响到使⽤效果 /* 导航条背景⾊*/ .sk n-box-bd .menu-l st{background: none repeat scroll 0 0 #00ad08;} /*⾸页/店铺动态背景⾊*/ .sk n-box-bd .menu-l st .l nk{background: none repeat scroll 0 0 #00ad08;} /*⾸页/店铺动态右边线*/ .sk n-box-bd .menu-l st .menu{border-r ght:1px #006205 sol d;} /*⾸页/店铺动态⽂字颜⾊*/ .sk n-box-bd .menu-l st .menu .t tle{color:#ff0000} /*所有分类背景⾊*/ .all-cats .l nk{background: none repeat scroll 0 0 #00ad08;} /*所有分类右边线*/ .all-cats .l nk{border-r ght:1px #006205 sol d;} /*所有分类⽂字颜⾊*/ .sk n-box-bd .all-cats .t tle{color:#ff0000} 1、所有分类背景，可以⽤图⽚： .sk n-box-bd .l nk{background:url(图⽚链接);} 2、修改整个导航的背景⾊背景： .sk n-box-bd .menu-l st{background:#000000;} 3.修改最右边留下的⼀⼩块： .sk n-box-bd{background:#000000;} 修改成图⽚的代码如下： .sk n-box-bd{background:url(图⽚链接);} 4 .字外： .sk n-box-bd .menu-l st .menu-selected .l nk{background:#000000;} 5.字⾥： .sk n-box-bd .menu-l st .menu-selected .l nk .t tle{background:#000000;} 字外+字⾥=全部 ！ 1.导航背景⾊代码 （除去“所有分类” ）如下： .menu-l st .l nk{background:#000000;} 2.导航栏⽂字 （除去“所有分类” ）如下： .menu-l st .menu .t tle{color:#颜⾊代码;font-s ze:字号px;} 3.“所有分类”的背景⾊代码如下： .all-cats .l nk{background:#000000;} 4 .“所有分类”的⽂字代码如下： .all-cats .l nk .t tle{color:#颜⾊代码;font-s ze:字号px;} 最新代码，解决字体改⼤后导航右侧消失的情况 ！代码如下： .all-cats .l nk .t tle{font-s ze:字号px;}.all-cats .l n