打造個性化淘寶導(dǎo)航欄,裝修CSS全解

1、淘寶導(dǎo)航裝修css全解（整理）首先來讓我們看看一個案例，也是我按照以下CSS對導(dǎo)航欄部分進(jìn)行編輯的最終效果。地址：圖示：采用的是彷win8的圖形界面風(fēng)格，沒有花一分錢，個人覺得還是不錯的！這是我在導(dǎo)航欄添加的CSS：.skin-box-bdbackground:none;border:0px;.menu-listbackground:none;border:0px;.linkbackground:none;border:0px;.menubackground:none;border:0px;.all-catsbackground:none;border:0px;.skin-box-bd .al

2、l-cats .titlecolor:#D37DF1;.menu-list .menu .titlecolor:#D37DF1;font-size:20px;.all-cats .link .titlecolor:#D37DF1;font-size:20px;.menu-list .menu-hover .linkbackground:#FFFFFF;.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-namecolor:#FFFFFF;.popup-contentbackground:#FFFFFF;.menu-list .me

3、nubackground:#260930;margin:0;padding:0px 10px;.popup-content .cats-tree .cat-hd-hoverbackground:#D37DF1;.popup-content .cats-tree .snd-pop-innerbackground:#D37DF1;.popup-content .cats-treemargin:0 0 20px 0;注：1. 其中border：0px 這個函數(shù)能讓選項卡的邊框和導(dǎo)航欄的上邊框消失不見！2.如果把 黃色熒光筆加重區(qū)域復(fù)制到您的css中可以讓導(dǎo)航欄變透明！3.background：non

4、e學(xué)過英語的同學(xué)應(yīng)該知道這是無色的意思吧。一、首先我們進(jìn)入到店鋪的裝修頁面，將鼠標(biāo)放在導(dǎo)航上面會出現(xiàn)“編輯”字樣，單擊，如圖選擇“顯示設(shè)置”選項卡1.修改導(dǎo)航分類下面的背景色，代碼如下：.skin-box-bd .linkbackground:#000000;效果如下-默認(rèn)是黑色的，如果你要別的顏色，只要修改#000000就可以了，顏色對照表地址-如果你想要更加個性，而不想只要簡單的純色塊的話，可以自己做圖片，然后連接上去，代碼如下：.skin-box-bd .linkbackground:url(圖片鏈接);效果如下-將“圖片連接”換成你的圖片的連接就可以了，一般都是自己做好然后上傳到淘寶圖

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

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

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

8、代碼;font-size:字號px;3.“所有分類”的背景色代碼如下：.all-cats .linkbackground:#000000;4.“所有分類”的文字代碼如下：.all-cats .link .titlecolor:#顏色代碼;font-size:字號px;最新代碼，解決字體改大后導(dǎo)航右側(cè)消失的情況！代碼如下：.all-cats .link .titlefont-size:字號px;.all-cats .link background:#3BAFFF;margin:0;padding:0px 3px;字號最大為21，繼續(xù)變大右側(cè)導(dǎo)航將

9、消失！該代碼還不是很完善，我們會繼續(xù)研究！ 5.二級分類文字代碼如下：.popup-content .cats-tree .fst-cat .cat-namefont-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal; 原來效果修改后效果6.二級分類背景代碼如下：.popup-contentbackground:#000000; 7.三級分類文字代碼（除去“所有寶貝”分類）如下.popup-content .cats-tree .snd-pop-innerfont-size:字號px;co

10、lor:#顏色代碼;font-weight:bold/bolder/normal; 原來效果修改后效果8.三級分類文字代碼（包括“所有寶貝”分類字體大?。┻@樣就無法改變字體顏色，我們會繼續(xù)完善該代碼！如下.popup-content .cats-tree .snd-pop-innerfont-size:字號px;color:#顏色;  9.三級分類背景代碼：.popup-content .cats-tree .snd-pop-innerbackground:#000000;10.一級導(dǎo)航分類（除去“所有寶貝”分類）分隔線顏色代碼如下：.menu

11、-list .menuborder-color:#000000;11.一級導(dǎo)航“所有寶貝”分類分隔線顏色代碼如下：.all-cats .linkborder-color:#000000; 12.一級導(dǎo)航分類的寬度修改代碼如下：.menu-list .menubackground:#顏色;margin:0;padding:0px 增加的寬度px; 13.鼠標(biāo)滑過一級分類導(dǎo)航文字變換背景色代碼如下：.menu-list .menu-hover .linkbackground:#000000;  14.鼠標(biāo)滑過一級分類導(dǎo)航文字變換顏色代碼如下：.menu-li

12、st .menu-hover .link .titlecolor:#FFFFFF; 15.鼠標(biāo)滑過二級分類導(dǎo)航文字變換背景色代碼如下：.popup-content .cats-tree .cat-hd-hoverbackground:#000000;  16.鼠標(biāo)滑過二級分類導(dǎo)航文字變換顏色代碼如下：.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-namecolor:#ff0000; 17.鼠標(biāo)滑過三級分類導(dǎo)航文字變換背景色代碼如下：.popup-content .cats-tree .snd-c

13、at-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-tree .fst-cat-iconbackground:url(圖片連接); 22.在三級分類前加上

14、小塊白色代碼如下：.popup-content .cats-tree .snd-cat-icondisplay:block;height:3px;width:3px;好了，我簡單的導(dǎo)航修改技巧就到這里了，以上效果都是用白色或黑色做給大家看，是為了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因為字體顏色和背景顏色一樣才變成全白的，修改了背景大家再修改字體顏色就可以了！希望大家都可以做出自己喜歡的導(dǎo)航！ 三、關(guān)于店招和導(dǎo)航兩側(cè)的修改！這里修改好，跟導(dǎo)航和店招結(jié)合在一起會更加完美！修改方式如下：在店鋪裝修頁面的左上方有個“裝修”，將鼠標(biāo)放在上面會出現(xiàn)下拉菜單，選擇“樣式菜單”單擊左側(cè)的“背景設(shè)置”這里有兩個選項卡，分別是“頁頭設(shè)置”和“頁面設(shè)置”。所謂頁頭，其實(shí)就是導(dǎo)航以上（包括導(dǎo)航）的部分，而頁面就是導(dǎo)航以下的部分了！這里可以用純顏色設(shè)置，也可以用圖片設(shè)置，我們要結(jié)合導(dǎo)航，肯