引接上期一篇的文章：淘寶店鋪裝修之導(dǎo)航CSS代碼修改教程（上），下面還有通過更多的CSS代碼實(shí)現(xiàn)淘寶店鋪導(dǎo)航調(diào)整。
6.其他分類：一級(jí)導(dǎo)航設(shè)置
類名
按鈕類名：.skin-box-bd.menu-list.menu{}
按鈕鏈接類名：.skin-box-bd.menu-list.menu.link{}
文字類名：.skin-box-bd.menu-list.menu.link.title{}
圖標(biāo)類名（只有二級(jí)分類時(shí)有）：.skin-box-bd.menu-list.menu.link.popup-icon{}
激活后的鏈接類名（如果當(dāng)前位置是首頁(yè)，則首頁(yè)按鈕就是激活項(xiàng)）：.skin-box-bd.menu-list.menu-selected.link{}
激活后的文字類名：.skin-box-bd.menu-list.menu-selected.link.title{}
屬性
float：設(shè)置浮動(dòng)，用于塊與塊之間向左或向右排列
line-height：設(shè)置文字行間距
font-family：設(shè)置字體
font-size：設(shè)置文字大小
font-weight：設(shè)置粗體（bold為粗其他屬性百度查看即可）
color：設(shè)置文字顏色
代碼如下
.skin-box-bd.menu-list.menu{width:auto;height:30px;margin:0px;padding:0px;display:block;background:none;border:none;}
設(shè)置按鈕寬度自適應(yīng)，設(shè)置高度，內(nèi)外邊距清零，按塊顯示（因?yàn)槭莑i標(biāo)簽），去掉背景和描邊
.skin-box-bd.menu-list.menu.link{width:auto;height:30px;margin:020px;padding:0px;border:none;display:block;background:none;}
按鈕鏈接設(shè)置寬高，外邊距清零，由于按鈕之間需要間隔，這個(gè)時(shí)候可以通過margin設(shè)置左右兩邊內(nèi)邊距各20像素，同樣按塊顯示，清除描邊及背景
.skin-box-bd.menu-list.menu.link.title{width:auto;height:30px;margin:0px;padding:0px;display:block;float:left;line-height:30px;font-family:"微軟雅黑";font-size:12px;font-weight:bold;color:#fff;}
文字設(shè)置通過display：block將文字變?yōu)閴K顯示，這樣就可以用float屬性進(jìn)行左靠，因?yàn)橛袌D標(biāo)在，這個(gè)設(shè)置時(shí)必須的
.skin-box-bd.menu-list.menu.link.popup-icon{width:5px;height:30px;margin:0px;margin-left:5px;padding:0px;display:block;float:left;background:no-repeaturl(圖片);}
圖標(biāo)設(shè)置與文字設(shè)置相同，用display：block變?yōu)閴K用float屬性靠在文字后方，設(shè)置素材圖片
效果如下
下面設(shè)置鼠標(biāo)滑過時(shí)的變化
.skin-box-bd.menu-list.menu:hover{background:#111;}
鼠標(biāo)滑過按鈕時(shí)，按鈕背景從隱藏變?yōu)橛蓄伾?/p>
.skin-box-bd.menu-list.menu:hover.link.title{color:#ffd98d;}
鼠標(biāo)滑過時(shí)，文字顏色改變
.skin-box-bd.menu-list.menu:hover.link.popup-icon{background-position:0px-30px;}
鼠標(biāo)滑過時(shí)，圖標(biāo)素材圖向上移動(dòng)30像素，從而顯示素材下半部分圖片
效果如下
下面設(shè)置激活后的按鈕
.skin-box-bd.menu-list.menu-selected.link.title{color:#ffd98d;}
激活后只改變了文字的顏色，這個(gè)部分只有發(fā)布之后才能生效，預(yù)覽時(shí)無法查看
7.設(shè)置二級(jí)分類背景
類名
二級(jí)導(dǎo)航外邊框類名：.popup-content{}
代碼如下
.popup-content{border:none;width:190px;}
統(tǒng)一設(shè)置其他分類和所有分類的二級(jí)導(dǎo)航的寬度及描邊
8.其他分類：二級(jí)導(dǎo)航
類名
外邊框類名：.menu-popup-cats{}
單個(gè)項(xiàng)類名：.menu-popup-cats.sub-cat{}
文字類名：.menu-popup-cats.sub-cat.cat-name{}
代碼如下
.menu-popup-cats{width:190px;height:auto;margin:0px;padding:0px;display:block;}
設(shè)置外邊框的寬度為190像素，高度通過auto設(shè)置為自適應(yīng)
.menu-popup-cats.sub-cat{width:190px;height:30px;margin:0px;padding:0px;display:block;background:#111;}
單個(gè)項(xiàng)的寬度同樣設(shè)置為190像素，高度設(shè)置每個(gè)按鈕為30像素，清零內(nèi)外邊距，設(shè)置背景色
.menu-popup-cats.sub-cat.cat-name{width:auto;height:30px;margin:0px0px0px10px;padding:0px;display:block;float:left;line-height:30px;font-family:"微軟雅黑";font-size:12px;color:#fff;}
字體寬度設(shè)置為自適應(yīng)，關(guān)鍵點(diǎn)事margin屬性，即內(nèi)邊距，內(nèi)邊距離左側(cè)相差10像素，這樣就能與其他分類一級(jí)導(dǎo)航文字對(duì)齊了
效果如下
現(xiàn)在設(shè)置鼠標(biāo)劃過時(shí)的變化
.menu-popup-cats.sub-cat:hover{background:#444;}
設(shè)置鼠標(biāo)滑過時(shí)，單個(gè)項(xiàng)的背景顏色
.menu-popup-cats.sub-cat:hover.cat-name{font-weight:bold;color:#ffd98d;}
設(shè)置鼠標(biāo)滑過時(shí)，文字加粗變色
效果如下
9.所有分類：二級(jí)導(dǎo)航
類名
外邊框類名：.all-cats-popup{}
彈出部分類名：.all-cats-popup.popup-inner{}
二級(jí)導(dǎo)航外邊框類名：.all-cats-popup.popup-inner.cats-tree{}
單個(gè)項(xiàng)類名：.all-cats-popup.popup-inner.cats-tree.fst-cat{}
無子集的按鈕鏈接：.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd{}
有子集的按鈕鏈接：.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children{}
文字：.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd.fst-cat-name{}
圖標(biāo)：.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children.fst-cat-icon{}
代碼如下
.all-cats-popup{width:190px;height:auto;margin:0px;padding:0px;background:#111;}
設(shè)置外邊框?qū)捀撸サ魞?nèi)外邊距，添加背景色
.all-cats-popup.popup-inner{width:190px;height:auto;margin:0px;padding:0px;}
.all-cats-popup.popup-inner.cats-tree{width:190px;height:auto;margin:0px;padding:0px;display:block;}
彈出部分及二級(jí)導(dǎo)航外邊框同樣設(shè)置寬高，去掉內(nèi)外邊距
.all-cats-popup.popup-inner.cats-tree.fst-cat{width:190px;height:30px;margin:0px;padding:0px;display:block;background:none;border:none;}
單個(gè)項(xiàng)設(shè)置時(shí)在設(shè)置寬高及內(nèi)外邊距的同時(shí)，去掉背景，去掉描邊
.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd{width:190px;height:30px;margin:0px;padding:0px;display:block;background:none;}
鏈接部分同上設(shè)置，必須按塊顯示（display：block）
.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd.fst-cat-name{width:170px;height:30px;margin:0px0px0px15px;padding:0px;display:block;float:left;line-height:30px;font-family:"微軟雅黑";font-size:12px;color:#fff;}
文字設(shè)置時(shí)，設(shè)置按塊顯示，向左對(duì)齊（float：left），同時(shí)由于要給圖標(biāo)預(yù)留位置，因?yàn)閷挾仍O(shè)置為170像素，文字與所有分類一級(jí)導(dǎo)航對(duì)齊，故此左邊距設(shè)置15像素（margin：0px0px0px15px）
.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children.fst-cat-icon{width:5px;height:30px;margin:0px5px0px0px;padding:0px;display:block;float:right;background:no-repeaturl(圖片);}
圖標(biāo)使用素材作為背景，設(shè)置不平鋪，設(shè)置好寬高，這回是右對(duì)齊（float：right），因?yàn)橐c所有分類一級(jí)導(dǎo)航的圖標(biāo)對(duì)齊，故右邊距設(shè)置5像素（margin:0px5px0px0px）
效果如下
下面設(shè)置鼠標(biāo)滑過時(shí)的樣式
.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd:hover{background:#444;}
當(dāng)鼠標(biāo)劃過時(shí)，背景顏色變化，可以設(shè)置在鏈接部分
.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd:hover.fst-cat-name{font-weight:bold;color:#ffd98d;}
文字部分在鼠標(biāo)劃過時(shí)會(huì)加粗變色
.all-cats-popup.popup-inner.cats-tree.fst-cat.has-children:hover.fst-cat-icon{background-position:0px-30px;}
圖標(biāo)則是在鼠標(biāo)劃過時(shí)，背景圖片向上移動(dòng)30像素，神似圖標(biāo)變色
效果如下
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則
