微信名稱：老y開網(wǎng)店
微 信 號(hào)：lakwdian
微信ＱＱ：A8686369
淘寶店鋪裝修過程中沒有用過CSS代碼的，特別是現(xiàn)在主流的旺鋪專業(yè)版，其實(shí)就跟沒有裝修是一樣的，根本看不出絢麗的效果，那CSS代碼都有什么效果呢？加入CSS代碼導(dǎo)航條、分類條的背景、字體、樣式都可以根據(jù)自己的喜好來(lái)編輯，可以讓店鋪裝修出非常漂亮的效果。 下面給詳細(xì)的給大家講一下CSS代碼如何使用以及如何編輯修改。
一、首先我們進(jìn)入到店鋪的裝修頁(yè)面，將鼠標(biāo)放在導(dǎo)航上面會(huì)出現(xiàn)“編輯”字樣，單擊，如圖
選擇“顯示設(shè)置”選項(xiàng)卡
1.修改導(dǎo)航分類下面的背景色，代碼如下： .skin-box-bd .link{background:#000000;}
效果如下
-------------------------------- 默認(rèn)是黑色的，如果你要?jiǎng)e的顏色，只要修改#000000就可以了，顏色對(duì)照表 可以利用本站的一款取色軟件：http://myautotome.com/thread-57-1-1.html
-------------------------------------------------------------------------- 如果你想要更加個(gè)性，而不想只要簡(jiǎn)單的純色塊的話，可以自己做圖片，然后連接上去，代碼如下： .skin-box-bd .link{background:url(圖片鏈接);}
效果如下
-------------------------------- 將“圖片連接”換成你的圖片的連接就可以了，一般都是自己做好然后上傳到淘寶圖片空間，然后鏈接就可以了！
在圖片空間點(diǎn)擊對(duì)應(yīng)圖片下方的“鏈接”按鈕可以直接復(fù)制圖片鏈接，替換到代碼里就可以了！ 2.修改整個(gè)導(dǎo)航的背景色【其實(shí)只修改了有分類之外的部分（前面我們已經(jīng)修改好了分類背景），還有最右邊那部分沒改到，后面會(huì)有修改那里的代碼，一步步跟著來(lái)就沒錯(cuò)了！】代碼如下： .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(圖片鏈接);} 這樣做你的導(dǎo)航完成的差不多了，但是發(fā)布之后你會(huì)發(fā)現(xiàn)字體的背景色塊有問題，只有文字下方才有色塊，比如“首頁(yè)”，只有“首頁(yè)”兩個(gè)字下面有顏色，其它有些四個(gè)字的就四個(gè)字有，這樣很影響美觀！
所以我們還要加上兩條代碼 4.字外： .skin-box-bd .menu-list .menu-selected .link{background:#000000;} 5.字里： .skin-box-bd .menu-list .menu-selected .link .title{background:#000000;} 字外+字里=全部！
這樣就完整了 好了，以上就是我的淘寶店里的導(dǎo)航里用的所有代碼，下面再給大家一些別的代碼��！
二、下面紅色部分為可以修改的，顏色代碼大家很熟悉了，字號(hào)就是字體的大小，在網(wǎng)頁(yè)中，字體大小一般是14到20左右，根據(jù)自己的需要設(shè)定吧，直接填寫數(shù)字就OK了！ 1.導(dǎo)航背景色代碼（除去“所有分類”）如下： .menu-list .link{background:#000000;}
2.導(dǎo)航欄文字（除去“所有分類”）如下： .menu-list .menu .title{color:#顏色代碼;font-size:字號(hào)px;}
3.“所有分類”的背景色代碼如下： .all-cats .link{background:#000000;}
4.“所有分類”的文字代碼如下： .all-cats .link .title{color:#顏色代碼;font-size:字號(hào)px;}
最新代碼，解決字體改大后導(dǎo)航右側(cè)消失的情況！ 5.二級(jí)分類文字代碼如下： .popup-content .cats-tree .fst-cat .cat-name{font-size:字號(hào)px;color:#顏色代碼;font-weight:bold/bolder/normal;} 原來(lái)效果
修改后效果
6.二級(jí)分類背景代碼如下： .popup-content{background:#000000;}
7.三級(jí)分類文字代碼（除去“所有寶貝”分類）如下 原來(lái)效果
修改后效果
8.三級(jí)分類文字代碼（包括“所有寶貝”分類字體大�。┻@樣就無(wú)法改變字體顏色，我們會(huì)繼續(xù)完善該代碼！如下 9.三級(jí)分類背景代碼： .popup-content .cats-tree .snd-pop-inner{background:#000000;}
10.一級(jí)導(dǎo)航分類（除去“所有寶貝”分類）分隔線顏色代碼如下： .menu-list .menu{border-color:#000000;}
11.一級(jí)導(dǎo)航“所有寶貝”分類分隔線顏色代碼如下： .all-cats .link{border-color:#000000;}
12.一級(jí)導(dǎo)航分類的寬度修改代碼如下： .menu-list .menu{background:#顏色;margin:0;padding:0px 增加的寬度px;}
13.鼠標(biāo)滑過一級(jí)分類導(dǎo)航文字變換背景色代碼如下： .menu-list .menu-hover .link{background:#000000;} 14.鼠標(biāo)滑過一級(jí)分類導(dǎo)航文字變換顏色代碼如下： .menu-list .menu-hover .link .title{color:#FFFFFF;}
15.鼠標(biāo)滑過二級(jí)分類導(dǎo)航文字變換背景色代碼如下： .popup-content .cats-tree .cat-hd-hover{background:#000000;} 16.鼠標(biāo)滑過二級(jí)分類導(dǎo)航文字變換顏色代碼如下： .skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}
17.鼠標(biāo)滑過三級(jí)分類導(dǎo)航文字變換背景色代碼如下： .popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}
18.二級(jí)分類上加空間代碼如下： .popup-content .cats-tree{margin:0 0 50px 0;}
19.修改“所有寶貝”右邊小圖標(biāo)代碼如下： .all-cats .link .popup-icon{background:url(圖片連接);}
20.修改二級(jí)分類右側(cè)圖標(biāo)代碼如下（有三級(jí)分類才會(huì)顯示）： .popup-content .cats-tree .fst-cat-icon{background:url(圖片連接);}
22.在三級(jí)分類前加上小塊白色代碼如下： .popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}
好了，我簡(jiǎn)單的導(dǎo)航修改技巧就到這里了，以上效果都是用白色或黑色做給大家看，是為了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因?yàn)樽煮w顏色和背景顏色一樣才變成全白的，修改了背景大家再修改字體顏色就可以了！希望大家都可以做出自己喜歡的導(dǎo)航！ 三、關(guān)于店招和導(dǎo)航兩側(cè)的修改！
這里修改好，跟導(dǎo)航和店招結(jié)合在一起會(huì)更加完美！ 修改方式如下：在店鋪裝修頁(yè)面的左上方有個(gè)“裝修”，將鼠標(biāo)放在上面會(huì)出現(xiàn)下拉菜單，選擇“樣式菜單”
單擊左側(cè)的“背景設(shè)置”
這里有兩個(gè)選項(xiàng)卡，分別是“頁(yè)頭設(shè)置”和“頁(yè)面設(shè)置”。
所謂頁(yè)頭，其實(shí)就是導(dǎo)航以上（包括導(dǎo)航）的部分，而頁(yè)面就是導(dǎo)航以下的部分了！這里可以用純顏色設(shè)置，也可以用圖片設(shè)置，我們要結(jié)合導(dǎo)航，肯定就用圖片咯！
當(dāng)然你想要更加個(gè)性的話，你也可以給每一個(gè)頁(yè)面都做一個(gè)不一樣的效果，只要單擊這里，下拉選擇相應(yīng)頁(yè)面就可以了！
四、最后還有一個(gè)發(fā)布不顯示效果的解決方法！ 導(dǎo)航修改好代碼之后，預(yù)覽有效果，但是發(fā)布之后還是顯示原來(lái)的效果，沒有任何變化！ 解決的方法是在你修改好代碼之后，預(yù)覽有效果了，之后就關(guān)閉“店鋪裝修”頁(yè)面，之后重新打開再點(diǎn)“發(fā)布”就會(huì)顯示效果了！ |
/1 
