接著上一節(jié)繼續(xù)說關(guān)于淘寶導(dǎo)航裝修的教程,沒看上一節(jié)的可點(diǎn)這里:淘寶店鋪導(dǎo)航css代碼裝修方法
這一次我們主要來分享一下關(guān)于淘寶導(dǎo)航需要用到的代碼:新手要多看一下,高手請(qǐng)?zhí)^本節(jié)!遇到問題可以加我微信號(hào):feimayi2017
這是全部代碼,如果你會(huì)CSS的可以試著改一下就可以用了。
設(shè)置導(dǎo)航條的背景色
/* 導(dǎo)航欄背景色*/
.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #00ad08;}
/* 導(dǎo)航列表背景色*/
.skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}
/*導(dǎo)航條最右邊的一部分背景*/
.skin-box-bd{background:#000000;}
--------------------------------------------------------------------------
設(shè)置導(dǎo)航條內(nèi)的“所有分類”
/*所有分類背景色*/
.all-cats .link{background: none repeat scroll 0 0 #00ad08;}
/*所有分類文字樣式*/
.all-cats .title{color:#顏色代碼;font-size:字號(hào)px;}
修改“所有寶貝”右邊小圖標(biāo)代碼如下:
.all-cats .link .popup-icon{background:url(圖片連接);}
------------------------------------------------------------------------------
設(shè)置導(dǎo)航條內(nèi)的一級(jí)分類
/*一級(jí)分類的分隔線,實(shí)際上就是右邊框的顏色*/
.skin-box-bd .menu-list .menu{border-right:1px #006205 solid;}
/*一級(jí)分類的文字樣式*/
.skin-box-bd .menu-list .menu .title{color:#顏色代碼;font-size:字號(hào)px;}
/*一級(jí)分類所在的li 列表的背景色*/
.skin-box-bd .menu-list .menu-selected .link{background:#000000;}
/*一級(jí)分類所在的li 列表的文字背景色*/
.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}
修改一級(jí)分類的寬度:
.menu-list .menu{background:#顏色;margin:0;padding:0px 增加的寬度px;}
鼠標(biāo)滑過一級(jí)分類導(dǎo)航文字變換背景色代碼如下:
.menu-list .menu-hover .link{background:#000000;}
鼠標(biāo)滑過一級(jí)分類導(dǎo)航文字變換顏色代碼如下:
.menu-list .menu-hover .link .title{color:#FFFFFF;}
---------------------------------------------------------------------------------
設(shè)置二級(jí)分類的樣式
二級(jí)分類文字代碼如下:
.popup-content .cats-tree .fst-cat .cat-name{font-size:字號(hào)px;color:#顏色代碼;font-weight:bold/bolder/normal;}
二級(jí)分類背景代碼如下:
.popup-content{background:#000000;}
鼠標(biāo)滑過二級(jí)分類導(dǎo)航文字變換背景色代碼如下:
.popup-content .cats-tree .cat-hd-hover{background:#000000;}
鼠標(biāo)滑過二級(jí)分類導(dǎo)航文字變換顏色代碼如下:
.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}
修改二級(jí)分類的高度:
.popup-content .cats-tree{margin:0 0 50px 0;}
修改二級(jí)分類右側(cè)圖標(biāo)代碼如下(有三級(jí)分類才會(huì)顯示):
.popup-content .cats-tree .fst-cat-icon{background:url(圖片連接);}
----------------------------------------------------------------------------------
設(shè)置三級(jí)分類的樣式
三級(jí)分類文字代碼(除去“所有寶貝”分類)如下
.popup-content .cats-tree .snd-pop-inner{font-size:字號(hào)px;color:#顏色代碼;font-weight:bold/bolder/normal;}
三級(jí)分類文字代碼(包括“所有寶貝”分類字體大小)這樣就無法改變字體顏色,我們會(huì)繼續(xù)完善該代碼!如下
.popup-content .cats-tree .snd-pop-inner{font-size:字號(hào)px;color:#顏色;}
三級(jí)分類背景代碼:
.popup-content .cats-tree .snd-pop-inner{background:#000000;}
鼠標(biāo)滑過三級(jí)分類導(dǎo)航文字變換背景色代碼如下:
.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}
在三級(jí)分類前加上小塊白色代碼如下:
.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}
如果覺得上面的代碼不好復(fù)制,你可以點(diǎn)下面的表格復(fù)制,然后粘貼在記事本上面!
這是全部代碼,如果你會(huì)CSS的可以試著改一下就可以用了。
設(shè)置導(dǎo)航條的背景色
/* 導(dǎo)航欄背景色*/
.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #00ad08;}
/* 導(dǎo)航列表背景色*/
.skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}
/*導(dǎo)航條最右邊的一部分背景*/
.skin-box-bd{background:#000000;}
--------------------------------------------------------------------------
設(shè)置導(dǎo)航條內(nèi)的“所有分類”
/*所有分類背景色*/
.all-cats .link{background: none repeat scroll 0 0 #00ad08;}
/*所有分類文字樣式*/
.all-cats .title{color:#顏色代碼;font-size:字號(hào)px;}
修改“所有寶貝”右邊小圖標(biāo)代碼如下:
.all-cats .link .popup-icon{background:url(圖片連接);}
------------------------------------------------------------------------------
設(shè)置導(dǎo)航條內(nèi)的一級(jí)分類
/*一級(jí)分類的分隔線,實(shí)際上就是右邊框的顏色*/
.skin-box-bd .menu-list .menu{border-right:1px #006205 solid;}
/*一級(jí)分類的文字樣式*/
.skin-box-bd .menu-list .menu .title{color:#顏色代碼;font-size:字號(hào)px;}
/*一級(jí)分類所在的li 列表的背景色*/
.skin-box-bd .menu-list .menu-selected .link{background:#000000;}
/*一級(jí)分類所在的li 列表的文字背景色*/
.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}
修改一級(jí)分類的寬度:
.menu-list .menu{background:#顏色;margin:0;padding:0px 增加的寬度px;}
鼠標(biāo)滑過一級(jí)分類導(dǎo)航文字變換背景色代碼如下:
.menu-list .menu-hover .link{background:#000000;}
鼠標(biāo)滑過一級(jí)分類導(dǎo)航文字變換顏色代碼如下:
.menu-list .menu-hover .link .title{color:#FFFFFF;}
---------------------------------------------------------------------------------
設(shè)置二級(jí)分類的樣式
二級(jí)分類文字代碼如下:
.popup-content .cats-tree .fst-cat .cat-name{font-size:字號(hào)px;color:#顏色代碼;font-weight:bold/bolder/normal;}
二級(jí)分類背景代碼如下:
.popup-content{background:#000000;}
鼠標(biāo)滑過二級(jí)分類導(dǎo)航文字變換背景色代碼如下:
.popup-content .cats-tree .cat-hd-hover{background:#000000;}
鼠標(biāo)滑過二級(jí)分類導(dǎo)航文字變換顏色代碼如下:
.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}
修改二級(jí)分類的高度:
.popup-content .cats-tree{margin:0 0 50px 0;}
修改二級(jí)分類右側(cè)圖標(biāo)代碼如下(有三級(jí)分類才會(huì)顯示):
.popup-content .cats-tree .fst-cat-icon{background:url(圖片連接);}
----------------------------------------------------------------------------------
設(shè)置三級(jí)分類的樣式
三級(jí)分類文字代碼(除去“所有寶貝”分類)如下
.popup-content .cats-tree .snd-pop-inner{font-size:字號(hào)px;color:#顏色代碼;font-weight:bold/bolder/normal;}
三級(jí)分類文字代碼(包括“所有寶貝”分類字體大小)這樣就無法改變字體顏色,我們會(huì)繼續(xù)完善該代碼!如下
.popup-content .cats-tree .snd-pop-inner{font-size:字號(hào)px;color:#顏色;}
三級(jí)分類背景代碼:
.popup-content .cats-tree .snd-pop-inner{background:#000000;}
鼠標(biāo)滑過三級(jí)分類導(dǎo)航文字變換背景色代碼如下:
.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}
在三級(jí)分類前加上小塊白色代碼如下:
.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}

