【旺鋪2012分享】導航CSS代碼使用修改技巧！

 

 

　　最近把店鋪從新裝修了一次。旺鋪2012的導航較以前有很大的改進。固定導航位置，保證買家能夠在店鋪裏隨意跳轉回到首頁，避免了之前「迷路」的現象。並且，導航還開放了css裝修功能，能夠用css代碼，裝修出超炫的效果！

 

如今就把一些簡單實用的代碼寫在下方，絕對乾貨！！！

 

必看：

　　一、有問題請在帖子上留言，咱們有空會免費幫你解答！
　　二、要是你必需要和再旺旺上和我一對一討論裝修的問題，那請先到我店鋪購買至少一件寶貝，我晚上9點後會在線跟你一塊兒討論問題，可是絕對不是說能夠百分百就能夠幫到你解決問題！
　　三、請相信咱們作的教程已經考慮到大部分的問題，多去看幾眼，不要問一些帖子裏有答案的問題，還有也能夠多多看看留言，通常你遇到的問題別人也有可能已經遇到了，能夠參考我給他們的回答!

　　四、真的不必花錢來向我提問問題，我也只是想你們不要在旺旺提問而已，並不是爲了利益！由於大家在這裏提問我同樣是會回答的！
　　請理解，談話到此爲止！

 

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

 

 

 

 

1、首先咱們進入到店鋪的裝修頁面，將鼠標放在導航上面會出現「編輯」字樣，單擊，如圖

選擇「顯示設置」選項卡

 

 

 

 

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

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

效果以下

--------------------------------

默認是黑色的，若是你要別的顏色，只要修改#000000就能夠了，顏色對照表地址

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

--------------------------------------------------------------------------

若是你想要更加個性，而不想只要簡單的純色塊的話，能夠本身作圖片，而後鏈接上去，代碼以下：

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

效果以下

--------------------------------

將「圖片鏈接」換成你的圖片的鏈接就能夠了，通常都是本身作好而後上傳到淘寶圖片空間，而後連接就能夠了！

 在圖片空間點擊對應圖片下方的「連接」按鈕能夠直接複製圖片連接，替換到代碼裏就能夠了！

 

 

2.修改整個導航的背景色【其實只修改了有分類以外的部分（前面咱們已經修改好了分類背景），還有最右邊那部分沒改到，後面會有修改那裏的代碼，一步步跟着來就沒錯了！】代碼以下：

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

 

這樣作你的導航完成的差很少了，可是發佈以後你會發現字體的背景色塊有問題，只有文字下方纔有色塊，好比「首頁」，只有「首頁」兩個字下面有顏色，其它有些四個字的就四個字有，這樣很影響美觀！

因此咱們還要加上兩條代碼

 

4.字外：

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

 

5.字裏：

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

字外+字裏=所有！

這樣就完整了

 

好了，以上就是個人淘寶店裏的導航裏用的全部代碼，下面再給你們一些別的代碼！！

 

 

 

 

2、下面紅色部分爲能夠修改的，顏色代碼你們很熟悉了，字號就是字體的大小，在網頁中，字體大小通常是14到20左右，根據本身的須要設定吧，直接填寫數字就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;}

　　最新代碼，解決字體改大後導航右側消失的狀況！
代碼以下：
.all-cats .link .title{font-size:字號px;}.all-cats .link {background:#3BAFFF;margin:0;padding:0px 3px;}
　　字號最大爲21，繼續變大右側導航將消失！該代碼還不是很完善，咱們會繼續研究！
 

 

 

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.三級分類文字代碼（包括「全部寶貝」分類字體大小）這樣就沒法改變字體顏色，咱們會繼續完善該代碼！以下
.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.修改二級分類右側圖標代碼以下（有三級分類纔會顯示）：

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

 

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

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

好了，我簡單的導航修改技巧就到這裏了，以上效果都是用白色或黑色作給你們看，是爲了你們能更好的看清楚效果，若是上面有些看到是全白的，那是由於字體顏色和背景顏色同樣才變成全白的，修改了背景你們再修改字體顏色就能夠了！但願你們均可以作出本身喜歡的導航！

 

 

3、關於店招和導航兩側的修改！

　　這裏修改好，跟導航和店招結合在一塊兒會更加完美！

修改方式以下：在店鋪裝修頁面的左上方有個「裝修」，將鼠標放在上面會出現下拉菜單，選擇「樣式菜單」

單擊左側的「背景設置」

　　這裏有兩個選項卡，分別是「頁頭設置」和「頁面設置」。

所謂頁頭，其實就是導航以上（包括導航）的部分，而頁面就是導航如下的部分了！這裏能夠用純顏色設置，也能夠用圖片設置，咱們要結合導航，確定就用圖片咯！

 

　　固然你想要更加個性的話，你也能夠給每個頁面都作一個不同的效果，只要單擊這裏，下拉選擇相應頁面就能夠了！

 

 

 

4、最後還有一個發佈不顯示效果的解決方法！

導航修改好代碼以後，預覽有效果，可是發佈以後仍是顯示原來的效果，沒有任何變化！

解決的方法是在你修改好代碼以後，預覽有效果了，以後就關閉「店鋪裝修」頁面，以後從新打開再點「發佈」就會顯示效果了！

若是你不知道哪一個是「店鋪裝修」頁面，那就直接關閉瀏覽器，從新進「店鋪裝修」那個點「發佈」就OK咯！

 

 

注意：

　　1.若是在整修過程當中遇到任何問題能夠跟帖留言，咱們有空會盡力幫你處理！

　　2.因爲旺旺爲工做所需，全部發到旺旺的信息都不會給予理睬，請諒解！謝謝支持！

祝全部店長生意興隆！

東莞飛浦照明