淘寶導(dǎo)航裝修css全解 超贊超詳細(xì)

1、一、首先我們進(jìn)入到店鋪的裝修頁面，將鼠標(biāo)放在導(dǎo)航上面會出現(xiàn)“編輯字樣，單擊，如圖選擇“顯示設(shè)置選項卡1.修改導(dǎo)航分類下面的背風(fēng)光，代碼如下：.skin-box-bd .linkbackground:#000000;效果如下-默認(rèn)是黑色的，如果你要別的顏色，只要修改#000000就可以了，顏色對照表地址 :/ 114la /other/rgb.htm-如果你想要更加個性，而不想只要簡單的純色塊的話，可以自己做圖片，然后連接上去，代碼如下：.skin-box-bd .linkbackground:url(圖片鏈接);效果如下-將“圖片連接換成你的圖片的連接就可以了，一般都是自己做好然后上傳到淘寶圖

2、片空間，然后鏈接就可以了！在圖片空間點擊對應(yīng)圖片下方的“鏈接按鈕可以直接復(fù)制圖片鏈接，替換到代碼里就可以了！2.修改整個導(dǎo)航的背風(fēng)光【其實只修改了有分類之外的局部前面我們已經(jīng)修改好了分類背景，還有最右邊那局部沒改到，后面會有修改那里的代碼，一步步跟著來就沒錯了！】代碼如下：.skin-box-bd .menu-listbackground:#000000;效果如下-修改顏色的方法同上-修改成圖片的代碼如下：.skin-box-bd .menu-listbackground:url(圖片鏈接);3.修改最右邊留下的一小塊，2里提到的，代碼如下：.skin-box-bdbackground:#00

3、0000;效果如下-修改顏色的方法同上-修改成圖片的代碼如下：.skin-box-bdbackground:url(圖片鏈接);這樣做你的導(dǎo)航完成的差不多了，但是發(fā)布之后你會發(fā)現(xiàn)字體的背風(fēng)光塊有問題，只有文字下方才有色塊，比方“首頁，只有“首頁兩個字下面有顏色，其它有些四個字的就四個字有，這樣很影響美觀！所以我們還要加上兩條代碼4.字外：.skin-box-bd .menu-list .menu-selected .linkbackground:#000000;5.字里：.skin-box-bd .menu-list .menu-selected .link .titlebackground:

4、#000000;字外+字里=全部！這樣就完整了好了，以上就是我的淘寶店里的導(dǎo)航里用的所有代碼，下面再給大家一些別的代碼！二、下面紅色局部為可以修改的，顏色代碼大家很熟悉了，字號就是字體的大小，在網(wǎng)頁中，字體大小一般是14到20左右，根據(jù)自己的需要設(shè)定吧，直接填寫數(shù)字就OK了！1.導(dǎo)航背風(fēng)光代碼除去“所有分類如下：.menu-list .linkbackground:#000000;2.導(dǎo)航欄文字除去“所有分類如下：.menu-list .menu .titlecolor:#顏色代碼;font-size:字號px;3.“所有分類的背風(fēng)光代碼如下：.all-cats .linkbackground

5、:#000000;4.“所有分類的文字代碼如下：.all-cats .link .titlecolor:#顏色代碼;font-size:字號px;最新代碼，解決字體改大后導(dǎo)航右側(cè)消失的情況！代碼如下：.all-cats.link.titlefont-size:字號px;.all-cats.linkbackground:#3BAFFF;margin:0;padding:0px3px;字號最大為21，繼續(xù)變大右側(cè)導(dǎo)航將消失！該代碼還不是很完善，我們會繼續(xù)研究！5.二級分類文字代碼如下：.popup-content .cats-tree .fst-cat .cat-namefont-size:字號p

6、x;color:#顏色代碼;font-weight:bold/bolder/normal;原來效果修改后效果6.二級分類背景代碼如下：.popup-contentbackground:#000000;7.三級分類文字代碼除去“所有寶貝分類如下.popup-content.cats-tree.snd-pop-innerfont-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;原來效果修改后效果8.三級分類文字代碼包括“所有寶貝分類字體大小這樣就無法改變字體顏色，我們會繼續(xù)完善該代碼！如下.popup-content.cats-tree.s

7、nd-pop-innerfont-size:字號px;color:#顏色;9.三級分類背景代碼：.popup-content .cats-tree .snd-pop-innerbackground:#000000;10.一級導(dǎo)航分類除去“所有寶貝分類分隔線顏色代碼如下：.menu-list .menuborder-color:#000000;11.一級導(dǎo)航“所有寶貝分類分隔線顏色代碼如下：.all-cats.linkborder-color:#000000;12.一級導(dǎo)航分類的寬度修改代碼如下：.menu-list .menubackground:#顏色;margin:0;padding:0p

8、x 增加的寬度px;13.鼠標(biāo)滑過一級分類導(dǎo)航文字變換背風(fēng)光代碼如下：.menu-list .menu-hover .linkbackground:#000000;14.鼠標(biāo)滑過一級分類導(dǎo)航文字變換顏色代碼如下：.menu-list .menu-hover .link .titlecolor:#FFFFFF;15.鼠標(biāo)滑過二級分類導(dǎo)航文字變換背風(fēng)光代碼如下：.popup-content .cats-tree .cat-hd-hoverbackground:#000000; 16.鼠標(biāo)滑過二級分類導(dǎo)航文字變換顏色代碼如下：.skin-box-bd .popup-content .cats-tre

9、e .cat-hd-hover .cat-namecolor:#ff0000;17.鼠標(biāo)滑過三級分類導(dǎo)航文字變換背風(fēng)光代碼如下：.popup-content .cats-tree .snd-cat-hd-hoverbackground:#000000;18.二級分類上加空間代碼如下：.popup-content .cats-treemargin:0 0 50px 0;19.修改“所有寶貝右邊小圖標(biāo)代碼如下：.all-cats .link .popup-iconbackground:url(圖片連接);20.修改二級分類右側(cè)圖標(biāo)代碼如下有三級分類才會顯示：.popup-content .cats

10、-tree .fst-cat-iconbackground:url(圖片連接);22.在三級分類前加上小塊白色代碼如下：.popup-content .cats-tree .snd-cat-icondisplay:block;height:3px;width:3px;好了，我簡單的導(dǎo)航修改技巧就到這里了，以上效果都是用白色或黑色做給大家看，是為了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因為字體顏色和背景顏色一樣才變成全白的，修改了背景大家再修改字體顏色就可以了！希望大家都可以做出自己喜歡的導(dǎo)航！三、關(guān)于店招和導(dǎo)航兩側(cè)的修改！這里修改好，跟導(dǎo)航和店招結(jié)合在一起會更加完美！修改方式如

11、下：在店鋪裝修頁面的左上方有個“裝修，將鼠標(biāo)放在上面會出現(xiàn)下拉菜單，選擇“樣式菜單單擊左側(cè)的“背景設(shè)置這里有兩個選項卡，分別是“頁頭設(shè)置和“頁面設(shè)置。所謂頁頭，其實就是導(dǎo)航以上包括導(dǎo)航的局部，而頁面就是導(dǎo)航以下的局部了！這里可以用純顏色設(shè)置，也可以用圖片設(shè)置，我們要結(jié)合導(dǎo)航，肯定就用圖片咯！當(dāng)然你想要更加個性的話，你也可以給每一個頁面都做一個不一樣的效果，只要單擊這里，下拉選擇相應(yīng)頁面就可以了！四、最后還有一個發(fā)布不顯示效果的解決方法！導(dǎo)航修改好代碼之后，預(yù)覽有效果，但是發(fā)布之后還是顯示原來的效果，沒有任何變化！解決的方法是在你修改好代碼之后，預(yù)覽有效果了，之后就關(guān)閉“店鋪裝修頁面，之后重新翻

12、開再點“發(fā)布就會顯示效果了！如果你不知道哪個是“店鋪裝修頁面，那就直接關(guān)閉瀏覽器，重新進(jìn)“店鋪裝修那個點“發(fā)布就OK咯！.skin-box-bd .menu-listbackground:none repeat scroll 0 0 #20B2AA;.skin-box-bd .menu-list .linkbackground:none repeat scroll 0 0 #20B2AA;.skin-box-bd .menu-list .menuborder-right:1px #20B2AA solid;.skin-box-bd .menu-list .menu .titlecolor:#F

13、FFFFF;.all-cats .linkbackground:none repeat scroll 0 0 #20B2AA;.all-cats .linkborder-right:1px #20B2AA solid;.skin-box-bd .all-cats .titlecolor:#FFFFFF;.skin-box-bdbackground:#20B2AA;.skin-box-bd .menu-list .menu-selected .linkbackground:#20B2AA;.skin-box-bd .menu-list .menu-selected .link .titlebackground:#20B2AA;.popup-contentbackground:#66CDAA;.popup-content .cats-tree .snd-pop-innerbackground:#66CDAA;.popup-content .cats-tree .fst