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

1、淘寶導(dǎo)航裝修css全解（整理）首先來讓我們看看一個(gè)案例，也是我按照以下css寸導(dǎo)航欄部分進(jìn)行編輯的最終效果。地址：圖示：采用的是彷win8的圖形界面風(fēng)格，沒有花一分錢，個(gè)人覺得還是不錯(cuò)的! 這是我在導(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-b

2、d .allcats .titlecolor:#D37DF1;.menu-list .menu .titlecolor:#D37DF1;fon t-size:20px;.all-cats .link .titlecolor:#D37DF1;font-size:20px;.menu-list .me nu-hover .li nkbackgro un d:#FFFFFF;.sk in-box-bd .popup-c ontent .cats-tree .cat-hd-hover .cat -n amecolor:#FFFFFF;.popup-c onten tbackgro un d:#FFFF

3、FF;.me nu-list .me nu backgro un d:#260930;marg in:0 ;paddi ng:0px10px;.popup-c ontent .cats-tree .cat-hd-hoverbackgro un d:#D37DF1;.p opup-c ontent .cats-tree .sn d-pop-i nn erbackgro un d:#D37DF1;.popup-co ntent .cats-treemarg in:0 0 20px 0;-L D也"口尋;航欄通呆拆董色董光筆加重區(qū)城復(fù)拔靈一、首先我們進(jìn)入到店鋪的裝修頁面，將鼠標(biāo)放在導(dǎo)航上面

4、會(huì)出現(xiàn)“編輯”字 樣，單擊，如圖選擇“顯示設(shè)置”選項(xiàng)卡耗設(shè)苴豆耘ST w- « uar m m rwJL 宰妊舍自動(dòng)給:超匱擇常埼一毎加前境：忙卻色禹HEW訶hOiHtmwg苗昭（tb出對(duì)電復(fù)褊加1.修改導(dǎo)航分類下面的背景色，代碼如下:.skin-box-bdin kbackgro und:#000000;耳阮1顯示快萱果砒旨謎皐砒捧潮?。?幗：rpag fttmtant，曲恥陽的如4伽iM匱1SM.sl<jn-buM-bd lit ikjtxdCk 申cxjnd, fOOOOOO；）效果如下斷有分類T首頁公司介紹話備動(dòng)在默認(rèn)是黑色的，如果你要?jiǎng)e的顏色，只要修改 #000000

5、就可以了，顏色對(duì)照表地 址RGB顏色查詢對(duì)照表因?yàn)榧嫒菪詥栴}，功能只能在IE瀏覽器中運(yùn)行MR顏色對(duì)艇複FFFFFFFFFFFOFFFFEO#FFFFOO#FFFAFA#FFFAF0#FFFACDfrFFFSDCFFFfieFitFFFSEE#FFF0F5>FFEFDB#FFEFD5FFECBbfrFFEBCDFFE7BAFFE4E1FFE4C4FFE4B5#FFE1FF#FFDEAD廿FFDA旳frFFD700#FFD390FFCICI"j# FTC 125frFFCOCBfrFFBBFF#FFB9CF#FFB6CL#FFB5 C5#f-FFAEB9#FFp.b4FFFASOU

6、#F淚M#FF8C69H FFSCOOFF33FAF92AB#FF9247#FF7F5O:#FF7 F二斗#FF7256如果你想要更加個(gè)性，而不想只要簡(jiǎn)單的純色塊的話，可以自己做圖片，然后連 接上去，代碼如下：.skin-box-bdinkbackground:url（圖片鏈接）;效果如下將“圖片連接”換成你的圖片的連接就可以了， 一般都是自己做好然后上傳到淘 寶圖片空間，然后鏈接就可以了！在圖片空間點(diǎn)擊對(duì)應(yīng)圖片下方的“鏈接”按鈕可以直接復(fù)制圖片鏈接，替換到 代碼里就可以了！2修改整個(gè)導(dǎo)航的背景色【其實(shí)只修改了有分類之外的部分（前面我們已經(jīng)修改 好了分類背景），還有最右邊那部分沒改到，后面會(huì)有

7、修改那里的代碼，一步步 跟著來就沒錯(cuò)了！】代碼如下：.ski n-box-bd .men u-listbackgrou nd:#000000;效果如下菌XL氓夏.遙有一小址檢色址央閘卞崖的代碼!修改顏色的方法同上修改成圖片的代碼如下:.skin-box-bd .me nu-listbackgro un d:url(圖片鏈接）；3. 修改最右邊留下的一小塊，2里提到的，代碼如下:.sk in-box-bdbackgrou nd:#000000;效果如下二 惟帀1窘視加0 r店博誦莎補(bǔ)上77! /修改顏色的方法同上修改成圖片的代碼如下：這樣做你的導(dǎo)航完成的差不多了，但是發(fā)布之后你會(huì)發(fā)現(xiàn)字體的背景色

8、塊有問題， 只有文字下方才有色塊，比如“首頁”，只有“首頁”兩個(gè)字下面有顏色， 其它 有些四個(gè)字的就四個(gè)字有，這樣很影響美觀！所以我們還要加上兩條代碼4. 字外:.skin-box-bd .me nu-list .me nu-selectedin kbackgro und:#000000;.skin-box-bdbackground:url（圖片鏈接）;5. 字里:.skin-box-bd .me nu-list .me nu-selectedink .titlebackgro und: 0；#00000字外+字里=全部!這樣就完整了好了，以上就是我的淘寶店里的導(dǎo)航里用的所有代碼，下面再給大家

9、一些別的 代碼！導(dǎo)Stx叱址二曹顯示役直弟歧會(huì)包動(dòng)甥鈕it揮霜竦一旅加rttSR，tfconient .t$hop-piKrrThitJorfca*<fi, it勿董星菲iv5t:ri boxt!d .Inlf'PwckQrcwnd r #000000j H.ri bax bd ,m&nusrtMCQroun止 iTOOODOO;) Q.dcri'baji-bd b ack ground: KJOODOO； Q.sldn btut-bd .menu-list .mmMEiected . HtfhKicgraLnri: fOOCnaoi) Q.fkri-bQi-bd

10、 .menu-Hst .rnerRj-seiected .Ink . frtl&backixjnd;fOOQDOC總二、下面紅色部分為可以修改的，顏色代碼大家很熟悉了，字號(hào)就是字體的大 小，在網(wǎng)頁中，字體大小一般是14到20左右，根據(jù)自己的需要設(shè)定吧，直接 填寫數(shù)字就OK了！1.導(dǎo)航背景色代碼（除去“所有分類”）如下：.menu-listin kbackgro und:#0000002.導(dǎo)航欄文字（除去“所有分類”）如下：.menu-list .menu .titlecolor:#顏色代碼；font-size: 字號(hào) px;d類*首頁公司介紹店鋪動(dòng)態(tài)3.“所有分類”的背景色代碼如下：.

11、all-cats .li nkbackgrou nd:#000000;4.“所有分類”的文字代碼如下：.all-catsink .titlecolor:#顏色代碼;font-size:字號(hào) px;上羈 F"*JE亠風(fēng)” .JF_1 亞比二 _ 丄所有分類r最新代碼，解決字體改大后導(dǎo)航右側(cè)消失的情況！ 代碼如下：.all-catsink .titlefont-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í)

12、分類文字代碼如下：.popup-content .cats-tree .fst-cat .cat-namefont-size:字號(hào) px;color: #顏色代碼;font-weight:bold/bolder/normal;原來效果>節(jié)能燈>開關(guān)插座>Q4曲廊系現(xiàn)囉頂燈支架>Q理俞?.專A首燈>Q8金屈吾鳧打貝8比燈>修改后效果所宵分類首頁所有寶貝>節(jié)能燈>>T開關(guān)插述>播吸頂燈Lt支架>燈筒燈>6. 二級(jí)分類背景代碼如下：.popup-co nten tbackgrou nd: #000000;7.三級(jí)分類文字代碼（除

13、去“所有寶貝”分類）如下字號(hào)px;color :#顏色代.popup-c ontent .cats-tree .sn d-pop-i nn erfo nt-size:碼;fon t-weight:bold/bolder/normal;原來效果修改后效果U型螺旋型分離式（插管）E14燈頭E27燈頭E40燈頭ES標(biāo)準(zhǔn)系列GN緊諜系列G24dL燈頭G24H-2燈頭G24q-1燈頭G24q-2燈頭還"war8.三級(jí)分類文字代碼（包括"所有寶貝”分類字體大小）這樣就無法改變字體顏色，我們 會(huì)繼續(xù)完善該代碼！如下.popup-content .cats-tree .snd-pop-in

14、nerfont-size:字號(hào) px;color: #顏色;孑分類首頁公司介紹店鋪五亍寶貝>按銷量g燈>按新品r>按價(jià)格e插座>9.三級(jí)分類背景代碼:#000000;.popup-c ontent .cats-tree .sn d-pop-i nn erbackgro und:10. 一級(jí)導(dǎo)航分類（除去“所有寶貝”分類）分隔線顏色代碼如下:.men u-list .men uborder-color:#000000;公因介紹一級(jí)導(dǎo)航“所有寶貝”分類 分隔線顏色代碼如下:.all-catsin kborder-color:#000000;11. 一級(jí)導(dǎo)航分類的寬度修改代碼

15、如下：.menu-list .menubackground: #顏色;margin:0;padding:0px增加的寬度 px;12. 鼠標(biāo)滑過一級(jí)分類導(dǎo)航文字變換背景色代碼如下:.menu-list .me nu-hoveri nkbackgro und:#00000Qh公司介貂-fl14.鼠標(biāo)滑過一級(jí)分類導(dǎo)航文字變換顏色代碼如下:.menu-list .me nu-hoveri nk .titlecolor:#FFFFFf15.鼠標(biāo)滑過二級(jí)分類導(dǎo)航文字變換背景色代碼如下:#000000.popup-c ontent .cats-tree .cat-hd-hoverbackgro und:亶

16、架5筒燈>燈具16.鼠標(biāo)滑過二級(jí)分類導(dǎo)航文字變換顏色代碼如下:.skin-box-bd .popup-c ontent .cats-tree .cat-hd-hover .cat -n amecolor: #ff0000 ; 所有分類T首更>按耶1節(jié)啟>按親1會(huì)燈>1#土糅席1_17. 鼠標(biāo)滑過三級(jí)分類導(dǎo)航文字變換背景色代碼如下:#000000;.popup-c ontent .cats-tree .sn d-cat-hd-hoverbackgro und:18. 二級(jí)分類上加空間代碼如下：50px 0;.popup-c ontent .cats-treemargi n

17、:0 0圖片連接）；19. 修改“所有寶貝”右邊小圖標(biāo)代碼如下: .all-cats .li nk .popup-ic on backgro un d:url(所有分類所有寶貝節(jié)能燈20. 修改二級(jí)分類右側(cè)圖標(biāo)代碼如下（有三級(jí)分類才會(huì)顯示）：.popup-content .cats-tree .fst-cat-iconbackground:url（圖片連接）;臺(tái)燈節(jié)能好光源類插管光源類湄類支架簡(jiǎn)燈|汁曰22.在三級(jí)分類前加上小塊白色代碼如下：.popup-c ontent .cats-tree .sn d-cat-ic on display:block ;height: 3px;width:

18、3px;A>f囁譴型p-E27 加1 >>匸匚;住霽對(duì)1好了，我簡(jiǎn)單的導(dǎo)航修改技巧就到這里了， 以上效果都是用白色或黑色做給大家 看，是為了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因?yàn)樽?體顏色和背景顏色一樣才變成全白的，修改了背景大家再修改字體顏色就可以了！ 希望大家都可以做出自己喜歡的導(dǎo)航！、關(guān)于店招和導(dǎo)航兩側(cè)的修改!這里修改好，跟導(dǎo)航和店招結(jié)合在一起會(huì)更加完美!修改方式如下：在店鋪裝修頁面的左上方有個(gè)“裝修”，將鼠標(biāo)放在上面會(huì)出現(xiàn) 下拉菜單，選擇“樣式菜單”頁面骨理7店棉單擊左側(cè)的“背景設(shè)置”0樣式編輯選擇崟設(shè)置的數(shù)由：円有貞直逢擇配色詩昌詩骨口頭饅萱貝匱設(shè)萱皿訣育眉色；| /顯示點(diǎn)擊這里保存頁頭背鳳圄：上怪窗片 擁餘丈洱禍?zhǔn)紾F.JPG,PHG3CAd>200kJll*J取消面品分類這里有兩個(gè)選項(xiàng)卡，分別是“頁頭設(shè)置”和“頁面設(shè)置”這擇養(yǎng)設(shè)置的熨面:所有貝面頁頭設(shè)置頁面設(shè)置<留意這里頁頭背量色：/顯示保存取消頁具背豎團(tuán)：上恰圖片刪除文件格式GFJPG.PNG支f蚊出2皿脫內(nèi)所謂頁頭，其實(shí)就是導(dǎo)航以上（包