大家可以先去看一下效果

最近把店鋪重新裝修了一次。旺鋪2012的導(dǎo)航較之前有很大的改進(jìn)。固定導(dǎo)航位置，保證買家可以在店鋪里隨意跳轉(zhuǎn)回到首頁(yè)，避免了以前“迷路”的現(xiàn)象。而且，導(dǎo)航還開(kāi)放了css裝修功能，可以用css代碼，裝修出超炫的效果！

現(xiàn)在就把一些簡(jiǎn)單實(shí)用的代碼寫(xiě)在下方，絕對(duì)干貨！！！

學(xué)習(xí)教程的朋友必看：

1、有問(wèn)題請(qǐng)?jiān)谔由狭粞裕覀冇锌諘?huì)免費(fèi)幫你解答；

2、要是你必須要和再旺旺上和我一對(duì)一討論裝修的問(wèn)題，那請(qǐng)先收藏我們的水晶飾品店及里面的寶貝不少于10件，是否分享或購(gòu)買根據(jù)您的實(shí)際需要而定；如果可以，您也可以跟我分享下您推廣寶貝的方式，因?yàn)槲覍?duì)這個(gè)是個(gè)白癡，就當(dāng)是相互交換的條件吧！謝謝理解，店鋪地址在我的店鋪店招上面，謝謝；

3、白天時(shí)間太少，一般晚上九點(diǎn)過(guò)后的時(shí)間比較充裕；

謝謝大家支持，裝修問(wèn)題我們將竭盡所能幫您處理！

下面開(kāi)始教程！

沒(méi)做任何修改的導(dǎo)航是這樣的

一、首先我們進(jìn)入到店鋪的裝修頁(yè)面，將鼠標(biāo)放在導(dǎo)航上面會(huì)出現(xiàn)“編輯”字樣，單擊，如圖

選擇“顯示設(shè)置”選項(xiàng)卡

1.修改導(dǎo)航分類下面的背景色，代碼如下：

.skin-box-bd .link{background:#000000;}

效果如下

默認(rèn)是黑色的，如果你要?jiǎng)e的顏色，只要修改#000000就可以了，顏色對(duì)照表地址

http://www.114la.com/other/rgb.htm

如果你想要更加個(gè)性，而不想只要簡(jiǎn)單的純色塊的話，可以自己做圖片，然后連接上去，代碼如下：

.skin-box-bd .link{background:url(圖片鏈接);}

效果如下

將“圖片連接”換成你的圖片的連接就可以了，一般都是自己做好然后上傳到淘寶圖片空間，然后鏈接就可以了！

 在圖片空間點(diǎn)擊對(duì)應(yīng)圖片下方的“鏈接”按鈕可以直接復(fù)制圖片鏈接，替換到代碼里就可以了！

2.修改整個(gè)導(dǎo)航的背景色【其實(shí)只修改了有分類之外的部分（前面我們已經(jīng)修改好了分類背景），還有最右邊那部分沒(méi)改到，后面會(huì)有修改那里的代碼，一步步跟著來(lái)就沒(méi)錯(cuò)了！】代碼如下：

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

效果如下

修改顏色的方法同上

修改成圖片的代碼如下：

.skin-box-bd .menu-list{background:url(圖片鏈接);}

3.修改最右邊留下的一小塊，2里提到的，代碼如下：

.skin-box-bd{background:#000000;}

 效果如下

修改顏色的方法同上

修改成圖片的代碼如下：

.skin-box-bd{background:url(圖片鏈接);}

這樣做你的導(dǎo)航完成的差不多了，但是發(fā)布之后你會(huì)發(fā)現(xiàn)字體的背景色塊有問(wèn)題，只有文字下方才有色塊，比如“首頁(yè)”，只有“首頁(yè)”兩個(gè)字下面有顏色，其它有些四個(gè)字的就四個(gè)字有，這樣很影響美觀！

所以我們還要加上兩條代碼

4.字外：

.skin-box-bd .menu-list .menu-selected .link{background:#000000;}

5.字里：

.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}

字外+字里=全部！

這樣就完整了

好了，以上就是我的淘寶店里的導(dǎo)航里用的所有代碼，下面再給大家一些別的代碼！！

二、下面紅色部分為可以修改的，顏色代碼大家很熟悉了，字號(hào)就是字體的大小，在網(wǎng)頁(yè)中，字體大小一般是14到20左右，根據(jù)自己的需要設(shè)定吧，直接填寫(xiě)數(shù)字就OK了！

1.導(dǎo)航背景色代碼（除去“所有分類”）如下：

.menu-list .link{background:#000000;}

2.導(dǎo)航欄文字（除去“所有分類”）如下：

.menu-list .menu .title{color:#顏色代碼;font-size:字號(hào)px;}

3.“所有分類”的背景色代碼如下：

.all-cats .link{background:#000000;}

4.“所有分類”的文字代碼如下：

.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;}
字號(hào)最大為21，繼續(xù)變大右側(cè)導(dǎo)航將消失！該代碼還不是很完善，我們會(huì)繼續(xù)研究！
 

5.二級(jí)分類文字代碼如下：

.popup-content .cats-tree .fst-cat .cat-name{font-size:字號(hào)px;color:#顏色代碼;font-weight:bold/bolder/normal;}

 原來(lái)效果

修改后效果

6.二級(jí)分類背景代碼如下：

.popup-content{background:#000000;}

7.三級(jí)分類文字代碼（除去“所有寶貝”分類）如下
.popup-content .cats-tree .snd-pop-inner{font-size:字號(hào)px;color:#顏色代碼;font-weight:bold/bolder/normal;}

 原來(lái)效果

修改后效果

8.三級(jí)分類文字代碼（包括“所有寶貝”分類字體大小）這樣就無(wú)法改變字體顏色，我們會(huì)繼續(xù)完善該代碼！如下
.popup-content .cats-tree .snd-pop-inner{font-size:字號(hào)px;color:#顏色;} 

9.三級(jí)分類背景代碼：

.popup-content .cats-tree .snd-pop-inner{background:#000000;}

10.一級(jí)導(dǎo)航分類（除去“所有寶貝”分類）分隔線顏色代碼如下：

.menu-list .menu{border-color:#000000;}

11.一級(jí)導(dǎo)航“所有寶貝”分類分隔線顏色代碼如下：

.all-cats .link{border-color:#000000;}

12.一級(jí)導(dǎo)航分類的寬度修改代碼如下：

.menu-list .menu{background:#顏色;margin:0;padding:0px 增加的寬度px;}

13.鼠標(biāo)滑過(guò)一級(jí)分類導(dǎo)航文字變換背景色代碼如下：

.menu-list .menu-hover .link{background:#000000;}

 

14.鼠標(biāo)滑過(guò)一級(jí)分類導(dǎo)航文字變換顏色代碼如下：

.menu-list .menu-hover .link .title{color:#FFFFFF;}

15.鼠標(biāo)滑過(guò)二級(jí)分類導(dǎo)航文字變換背景色代碼如下：

.popup-content .cats-tree .cat-hd-hover{background:#000000;}

  

16.鼠標(biāo)滑過(guò)二級(jí)分類導(dǎo)航文字變換顏色代碼如下：

.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}

17.鼠標(biāo)滑過(guò)三級(jí)分類導(dǎo)航文字變換背景色代碼如下：

.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}

18.二級(jí)分類上加空間代碼如下：

.popup-content .cats-tree{margin:0 0 50px 0;}

19.修改“所有寶貝”右邊小圖標(biāo)代碼如下：

.all-cats .link .popup-icon{background:url(圖片連接);}

20.修改二級(jí)分類右側(cè)圖標(biāo)代碼如下（有三級(jí)分類才會(huì)顯示）：

.popup-content .cats-tree .fst-cat-icon{background:url(圖片連接);}

22.在三級(jí)分類前加上小塊白色代碼如下：

.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}

好了，我簡(jiǎn)單的導(dǎo)航修改技巧就到這里了，以上效果都是用白色或黑色做給大家看，是為了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因?yàn)樽煮w顏色和背景顏色一樣才變成全白的，修改了背景大家再修改字體顏色就可以了！希望大家都可以做出自己喜歡的導(dǎo)航！

三、關(guān)于店招和導(dǎo)航兩側(cè)的修改！

這里修改好，跟導(dǎo)航和店招結(jié)合在一起會(huì)更加完美！

修改方式如下：在店鋪裝修頁(yè)面的左上方有個(gè)“裝修”，將鼠標(biāo)放在上面會(huì)出現(xiàn)下拉菜單，選擇“樣式菜單”

單擊左側(cè)的“背景設(shè)置”

這里有兩個(gè)選項(xiàng)卡，分別是“頁(yè)頭設(shè)置”和“頁(yè)面設(shè)置”。

所謂頁(yè)頭，其實(shí)就是導(dǎo)航以上（包括導(dǎo)航）的部分，而頁(yè)面就是導(dǎo)航以下的部分了！這里可以用純顏色設(shè)置，也可以用圖片設(shè)置，我們要結(jié)合導(dǎo)航，肯定就用圖片咯！

當(dāng)然你想要更加個(gè)性的話，你也可以給每一個(gè)頁(yè)面都做一個(gè)不一樣的效果，只要單擊這里，下拉選擇相應(yīng)頁(yè)面就可以了！

四、最后還有一個(gè)發(fā)布不顯示效果的解決方法！

導(dǎo)航修改好代碼之后，預(yù)覽有效果，但是發(fā)布之后還是顯示原來(lái)的效果，沒(méi)有任何變化！

解決的方法是在你修改好代碼之后，預(yù)覽有效果了，之后就關(guān)閉“店鋪裝修”頁(yè)面，之后重新打開(kāi)再點(diǎn)“發(fā)布”就會(huì)顯示效果了！

如果你不知道哪個(gè)是“店鋪裝修”頁(yè)面，那就直接關(guān)閉瀏覽器，重新進(jìn)“店鋪裝修”那個(gè)點(diǎn)“發(fā)布”就OK咯！

樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則

本文來(lái)源： 【旺鋪2012分享】導(dǎo)航CSS代碼使用修改技巧！