CSS 淘寶導(dǎo)航代碼集合（附使用技巧）
2020-11-16 11:00 更新
如今，淘寶撐起了中國(guó)電商的半邊天，淘寶店鋪多如麻，淘寶競(jìng)爭(zhēng)越來(lái)越激烈，除了大打價(jià)格戰(zhàn)就是靠精美的店鋪裝修來(lái)吸引瀏覽者的駐足。淘寶導(dǎo)航CSS代碼相信很多店鋪經(jīng)營(yíng)者都懂得，但是如何運(yùn)用CSS代碼做出精致的淘寶導(dǎo)航卻是很多人都不清楚的，導(dǎo)航對(duì)于買(mǎi)家來(lái)說(shuō)是指路燈，這樣一看就能出導(dǎo)航的重要性了。有時(shí)候看到別人家的店鋪導(dǎo)航欄好有個(gè)性，也想照著做一個(gè)，那么應(yīng)該怎么操作呢？那么下面就給大家整理一些超好用的淘寶css導(dǎo)航代碼及使用方法和技巧。
讓別人的導(dǎo)航欄CSS代碼為你所用的方法
1.首先找到別人店鋪的首頁(yè)，右鍵單擊導(dǎo)航欄空白處，查看源代碼。
2.打開(kāi)以后看到的代碼
如果沒(méi)有找到這個(gè)標(biāo)識(shí)說(shuō)明這是用 sdk 高級(jí)模版裝修的，所以就沒(méi)有代碼了。
找到這幾個(gè)標(biāo)識(shí)，這里就是我們要找的 CSS 文件。下面的就是我們要找的 CSS 文件。跟著我們將它用瀏覽器打開(kāi)，或者下載個(gè) notepad 程序，雙擊打開(kāi)就可以看到相應(yīng)的代碼。
3.打開(kāi)文件，點(diǎn)擊“替換”
4.然后復(fù)制下面這段代碼 #page#content.tshop-pbsm-shop-nav-ch
粘貼進(jìn)查找內(nèi)容框里，替換為后面的框不要填寫(xiě)，直接點(diǎn)擊"全部替換"按鈕。那么，這樣的 CSS代碼就可以為我們所用了。
5.最后，我們把 CSS 代碼做好后，粘貼到自己的店鋪里，卻發(fā)現(xiàn)分類(lèi)是沒(méi)有底色的。解決方法不難，我們只需要設(shè)置一下頁(yè)頭背景就可以了。
淘寶 CSS 導(dǎo)航參考代碼
以下文字內(nèi)容可以一同復(fù)制使用，不會(huì)影響到使用效果
- /* 導(dǎo)航條背景色*/ .skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}
- /*首頁(yè)/店鋪動(dòng)態(tài)背景色*/ .skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #00ad08;}
- /*首頁(yè)/店鋪動(dòng)態(tài)右邊線(xiàn)* / .skin-box-bd .menu-list .menu{border-right:1px #006205 solid;}
- /*首頁(yè)/店鋪動(dòng)態(tài)文字顏色*/ .skin-box-bd .menu-list .menu .title{color:#ff0000}
- /*所有分類(lèi)背景色*/ .all-cats .link{background: none repeat scroll 0 0 #00ad08;}
- /*所有分類(lèi)右邊線(xiàn)*/ .all-cats .link{border-right:1px #006205 solid;}
- /*所有分類(lèi)文字顏色*/ .skin-box-bd .all-cats .title{color:#ff0000}
- 所有分類(lèi)背景，可以用圖片：.skin-box-bd .link{background:url(圖片鏈接);}
- 修改整個(gè)導(dǎo)航的背景色背景：.skin-box-bd .menu-list{background:#000000;}
- 修改最右邊留下的一小塊：.skin-box-bd{background:#000000;}
- 修改成圖片的代碼如下：.skin-box-bd{background:url(圖片鏈接);}
- 字外：.skin-box-bd .menu-list .menu-selected .link{background:#000000;}
- 字里：.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}
- 字外+字里=全部！
- 1.導(dǎo)航背景色代碼（除去“所有分類(lèi)”）如下：.menu-list .link{background:#000000;}
- 導(dǎo)航欄文字（除去“所有分類(lèi)”）如下：.menu-list .menu .title{color:#顏色代碼;font-size:字號(hào)px;}
- “所有分類(lèi)”的背景色代碼如下：.all-cats .link{background:#000000;}
- “所有分類(lèi)”的文字代碼如下：.all-cats .link .title{color:#顏色代碼;font-size:字號(hào)px;}
- 最新代碼，解決字體改大后導(dǎo)航右側(cè)消失的情況！代碼如下：.all-cats .link .title{font-size:字號(hào)px;}.all-cats .link {background:#3BAFFF;margin:0;padding:0px 3px;}
- 二級(jí)分類(lèi)文字代碼如下：.popup-content .cats-tree .fst-cat .cat-name{font-size:字號(hào)px;color:#顏色代碼;font-weight:bold/bolder/normal;}
- 二級(jí)分類(lèi)背景代碼如下：.popup-content{background:#000000;}
- 三級(jí)分類(lèi)文字代碼（除去“所有寶貝”分類(lèi)）如下.popup-content .cats-tree .snd-pop-inner{font-size:字號(hào)px;color:#顏色代碼;font-weight:bold/bolder/normal;}
- 三級(jí)分類(lèi)文字代碼（包括“所有寶貝”分類(lèi)字體大?。┻@樣就無(wú)法改變字體顏色，我們會(huì)繼續(xù)完善該代碼！如下 .popup-content .cats-tree .snd-pop-inner{font-size:字號(hào)px;color:#顏色;}
- 三級(jí)分類(lèi)背景代碼：.popup-content .cats-tree .snd-pop-inner{background:#000000;}
- 一級(jí)導(dǎo)航分類(lèi)（除去“所有寶貝”分類(lèi)）分隔線(xiàn)顏色代碼如下：.menu-list .menu{border-color:#000000;}
- 一級(jí)導(dǎo)航“所有寶貝”分類(lèi)分隔線(xiàn)顏色代碼如下：.all-cats .link{border-color:#000000;}
- 一級(jí)導(dǎo)航分類(lèi)的寬度修改代碼如下：.menu-list .menu{background:#顏色;margin:0;padding:0px 增加的寬度px;}
- 鼠標(biāo)滑過(guò)一級(jí)分類(lèi)導(dǎo)航文字變換背景色代碼如下：.menu-list .menu-hover .link{background:#000000;}
- 鼠標(biāo)滑過(guò)一級(jí)分類(lèi)導(dǎo)航文字變換顏色代碼如下：.menu-list .menu-hover .link .title{color:#FFFFFF;}
- 鼠標(biāo)滑過(guò)二級(jí)分類(lèi)導(dǎo)航文字變換背景色代碼如下：.popup-content .cats-tree .cat-hd-hover{background:#000000;}
- 鼠標(biāo)滑過(guò)二級(jí)分類(lèi)導(dǎo)航文字變換顏色代碼如下：.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}
- 鼠標(biāo)滑過(guò)三級(jí)分類(lèi)導(dǎo)航文字變換背景色代碼如下：.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}
- 二級(jí)分類(lèi)上加空間代碼如下：.popup-content .cats-tree{margin:0 0 50px 0;}
- 修改“所有寶貝”右邊小圖標(biāo)代碼如下：.all-cats .link .popup-icon{background:url(圖片連接);}
- 修改二級(jí)分類(lèi)右側(cè)圖標(biāo)代碼如下（有三級(jí)分類(lèi)才會(huì)顯示）：.popup-content .cats-tree .fst-cat-icon{background:url(圖片連接);}
- 在三級(jí)分類(lèi)前加上小塊白色代碼如下：.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}
全透明導(dǎo)航CSS代碼
很多時(shí)候在裝修的過(guò)程中，需要淘寶店鋪的導(dǎo)航變成透明的，不想被系統(tǒng)導(dǎo)航的顏色是擋住，這樣可以看到自己設(shè)置的店鋪背景圖；這時(shí)我們需要用到一個(gè)淘寶導(dǎo)航透明代碼，網(wǎng)上很多代碼都不是很完整（所有分類(lèi)無(wú)法透明）。?
font-size:15px;??font-weight:bold;?這個(gè)分別是字體大小和粗體。- ?
.skin-box-bd{background:none;border:none;}? - ?
.menu-list{background:none;}? - ?
.link{background:none;border:none;}? - ?
.menu{background:none;}? - ?
.all-cats{background:none;}? - ?
.skin-box-bd .all-cats .link{border:none;}? - ?
.skin-box-bd .menu-list .menu{border:none;}? - ?
.menu-list .menu .title{color:#000000;font-size:15px;font-weight:bold;}? .all-cats .link .title{color:#000000;font-size:15px;font-weight:bold;}?- ?
.skin-box-bd .menu-list .menu-selected .link{background:none;}? - ?
.skin-box-bd .menu-list .menu-selected .link .title{background:none;}?
淘寶天貓導(dǎo)航CSS樣式代碼在線(xiàn)生成工具
淘寶店鋪導(dǎo)航CSS代碼使用修改技巧
以上內(nèi)容是否對(duì)您有幫助：
更多建議：