大家可以先去看一下效果

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

現(xiàn)在就把一些簡單實用的代碼寫在下方，絕對干貨！！！

學習教程的朋友必看：

1、有問題請在帖子上留言，我們有空會免費幫你解答；

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

3、白天時間太少，一般晚上九點過后的時間比較充裕；

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

下面開始教程！

沒做任何修改的導航是這樣的

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

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

1.修改導航分類下面的背景色，代碼如下：

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

效果如下

默認是黑色的，如果你要別的顏色，只要修改#000000就可以了，顏色對照表地址

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

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

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

效果如下

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

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

2.修改整個導航的背景色【其實只修改了有分類之外的部分（前面我們已經(jīng)修改好了分類背景），還有最右邊那部分沒改到，后面會有修改那里的代碼，一步步跟著來就沒錯了！】代碼如下：

.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(圖片鏈接);}

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

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

4.字外：

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

5.字里：

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

字外+字里=全部！

這樣就完整了

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

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

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

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

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

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

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

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

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

.all-cats .link .title{color:#顏色代碼;font-size:字號px;}

最新代碼，解決字體改大后導航右側(cè)消失的情況！
代碼如下：
.all-cats .link .title{font-size:字號px;}.all-cats .link {background:#3BAFFF;margin:0;padding:0px 3px;}
字號最大為21，繼續(xù)變大右側(cè)導航將消失！該代碼還不是很完善，我們會繼續(xù)研究！
 

5.二級分類文字代碼如下：

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

 原來效果

修改后效果

6.二級分類背景代碼如下：

.popup-content{background:#000000;}

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

 原來效果

修改后效果

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

9.三級分類背景代碼：

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

10.一級導航分類（除去“所有寶貝”分類）分隔線顏色代碼如下：

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

11.一級導航“所有寶貝”分類分隔線顏色代碼如下：

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

12.一級導航分類的寬度修改代碼如下：

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

13.鼠標滑過一級分類導航文字變換背景色代碼如下：

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

 

14.鼠標滑過一級分類導航文字變換顏色代碼如下：

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

15.鼠標滑過二級分類導航文字變換背景色代碼如下：

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

  

16.鼠標滑過二級分類導航文字變換顏色代碼如下：

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

17.鼠標滑過三級分類導航文字變換背景色代碼如下：

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

18.二級分類上加空間代碼如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

導航修改好代碼之后，預覽有效果，但是發(fā)布之后還是顯示原來的效果，沒有任何變化！

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

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

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

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

本文來源： 【旺鋪2012分享】導航CSS代碼使用修改技巧！