接著上一節(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的可以試著改一下就可以用了。
432.jpg

設(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;}



飛螞蟻模板網(wǎng)版權(quán)2