快消品貨源批發(fā)市場(chǎng)
快消品貨源分銷平臺(tái)
 
 
當(dāng)前位置: 貨源批發(fā)網(wǎng) » 網(wǎng)商學(xué)院 » 網(wǎng)店裝修 » 淘寶店鋪裝修 » 淘寶店鋪導(dǎo)航CSS代碼詳解

淘寶店鋪導(dǎo)航CSS代碼詳解

放大字體  縮小字體 發(fā)布日期：2024-04-16 07:32:58  來(lái)源：電商聯(lián)盟  作者：樂(lè)發(fā)網(wǎng)  瀏覽次數(shù)：27

{height:28px!important;width:950px!important;overflow:hidden;display:block!important;font-

size:14px;font-weight:500;}

a:hover
{//鼠標(biāo)滑過(guò)效果
text-decoration:none;background:#C0D9D9;font-size:14px;font-weight:500;}

.skin-box-bd
{//導(dǎo)航框
background-image:none;
background-color:transparent;
}

.skin-box-bd.menu-list
{//菜單欄
background-image:none;
background-color:transparent;
}

.all-cats
{//所有分類
background-image:none;
background-color:transparent;
}

.all-cats.link
{//分類鏈接
background-image:none;
background-color:transparent;
}

.all-cats.all-cats-trigger.link.popup-icon
{//所有分類箭頭圖標(biāo)
background-image:none;
background-color:transparent;
}

.popup-icon
{//所有分類箭頭圖標(biāo)
background-image:none;
background-color:transparent;
}

.all-cats.link.title
{//分類文字
color:red;
font-size:14px;font-weight:500;
background-image:none;
background-color:transparent;
}

.menu-list.menu
{//菜單
display:block;
background-image:none;
background-color:transparent;
}
.menu-list.link
{//菜單鏈接
dispaly:block;
background-image:none;
background-color:transparent;
}

.menu-list.menu.link.title
{//導(dǎo)航菜單文字
color:red;
font-size:14px;font-weight:500;}

.menu-list.menu-hover.link
{//導(dǎo)航菜單滑過(guò)
display:block;background:#C0D9D9;}

.menu-list.menu-hover.link.title
{//導(dǎo)航菜單滑過(guò)文字
color:green;
display:block;background:#C0D9D9;}

.menu-list.menu-selected
{//當(dāng)前顯示頁(yè)面菜單
display:block;background:#C0D9D9;}

.menu-list.menu-selected.link
{//當(dāng)前顯示頁(yè)面鏈接
border-bottom-color:red;
background-color:#C0D9D9;display:block;}

.menu-list.menu-selected.link.title
{//當(dāng)前頁(yè)面顯示文字
display:block;
color:gray;
height:28px;
border-bottom-color:white;
background-color:#C0D9D9;
}

導(dǎo)航欄CSS代碼詳解顏色

-----------------------------------------------------------
第一部分、靜態(tài)背景顏色
1、首頁(yè)/店鋪動(dòng)態(tài)/其它導(dǎo)航類目的背景色，這里設(shè)為紅色
.skin-box-bd.menu-list.link{background:red;}
2、所有分類的背景色（最左邊的），一樣設(shè)為紅色
.all-cats.link{background:red;}
到這里，發(fā)覺(jué)右邊的顏色還沒(méi)有變呢，好的，接著下一步
3、導(dǎo)航條整個(gè)分類段背景色，還是要設(shè)為紅色，整體布局好看些
.skin-box-bd.menu-list{background:red;}
注意觀察，最右邊還有一絲地方?jīng)]有變
4、導(dǎo)航條背景色（是最底層了吧），修補(bǔ)導(dǎo)航右側(cè)缺口，再設(shè)為紅色

.skin-box-bd{background:red;}



{height:28px!important;width:950px!important;overflow:hidden;display:block!important;font-

size:14px;font-weight:500;}

a:hover
{//鼠標(biāo)滑過(guò)效果
text-decoration:none;background:#C0D9D9;font-size:14px;font-weight:500;}

.skin-box-bd
{//導(dǎo)航框
background-image:none;
background-color:transparent;
}

.skin-box-bd.menu-list
{//菜單欄
background-image:none;
background-color:transparent;
}

.all-cats
{//所有分類
background-image:none;
background-color:transparent;
}

.all-cats.link
{//分類鏈接
background-image:none;
background-color:transparent;
}

.all-cats.all-cats-trigger.link.popup-icon
{//所有分類箭頭圖標(biāo)
background-image:none;
background-color:transparent;
}

.popup-icon
{//所有分類箭頭圖標(biāo)
background-image:none;
background-color:transparent;
}

.all-cats.link.title
{//分類文字
color:red;
font-size:14px;font-weight:500;
background-image:none;
background-color:transparent;
}

.menu-list.menu
{//菜單
display:block;
background-image:none;
background-color:transparent;
}
.menu-list.link
{//菜單鏈接
dispaly:block;
background-image:none;
background-color:transparent;
}

.menu-list.menu.link.title
{//導(dǎo)航菜單文字
color:red;
font-size:14px;font-weight:500;}

.menu-list.menu-hover.link
{//導(dǎo)航菜單滑過(guò)
display:block;background:#C0D9D9;}

.menu-list.menu-hover.link.title
{//導(dǎo)航菜單滑過(guò)文字
color:green;
display:block;background:#C0D9D9;}

.menu-list.menu-selected
{//當(dāng)前顯示頁(yè)面菜單
display:block;background:#C0D9D9;}

.menu-list.menu-selected.link
{//當(dāng)前顯示頁(yè)面鏈接
border-bottom-color:red;
background-color:#C0D9D9;display:block;}

.menu-list.menu-selected.link.title
{//當(dāng)前頁(yè)面顯示文字
display:block;
color:gray;
height:28px;
border-bottom-color:white;
background-color:#C0D9D9;
}

-----------------------------------------------------------
第一部分、靜態(tài)背景顏色
1、首頁(yè)/店鋪動(dòng)態(tài)/其它導(dǎo)航類目的背景色，這里設(shè)為紅色
.skin-box-bd.menu-list.link{background:red;}
2、所有分類的背景色（最左邊的），一樣設(shè)為紅色
.all-cats.link{background:red;}
到這里，發(fā)覺(jué)右邊的顏色還沒(méi)有變呢，好的，接著下一步
3、導(dǎo)航條整個(gè)分類段背景色，還是要設(shè)為紅色，整體布局好看些
.skin-box-bd.menu-list{background:red;}
注意觀察，最右邊還有一絲地方?jīng)]有變
4、導(dǎo)航條背景色（是最底層了吧），修補(bǔ)導(dǎo)航右側(cè)缺口，再設(shè)為紅色
.skin-box-bd{background:red;}

第二部分、分隔線、靜態(tài)文字的顏色
5、首頁(yè)等分類的右邊的分隔線顏色，設(shè)為白色
.menu-list.menu{border-color:white;}
6、所有分類的右邊的分隔線顏色，設(shè)為白色
.all-cats.link{border-color:white;}
7、首頁(yè)/店鋪動(dòng)態(tài)/其它導(dǎo)航類目的文字顏色
.menu-list.menu.title{color:yellow;}
8、所有分類的文字顏色（最左邊那個(gè)）,
.all-cats.link.title{color:yellow;}
第三部分、分類下的顏色
9、二級(jí)分類的背景色，設(shè)為灰色
.popup-content{background:gray;}
10、三級(jí)分類的背景色，我設(shè)為深灰色
.popup-content.cats-tree.snd-pop-inner{background:#504f4f;}
11、二級(jí)分類的文字顏色，設(shè)為黃色
.popup-content.cat-name{color:yellow;}
12、三級(jí)分類的文字顏色。（如果后面要鼠標(biāo)滑過(guò)變色<21.22>，這句要寫(xiě)）
.popup-content.cats-tree.snd-pop-inner.cat-name{color:yellow;}
第四部分、鼠標(biāo)滑過(guò)變背景色
13、鼠標(biāo)滑過(guò)首頁(yè)/店鋪動(dòng)態(tài)/其它導(dǎo)航類目變換背景色，這設(shè)為藍(lán)色
.menu-list.menu-hover.link{background:blue;}
14、鼠標(biāo)滑過(guò)所有分類（最左邊那個(gè)）變換背景色，這同樣設(shè)為藍(lán)色
.all-cats-hover.link{background:blue;}
15、鼠標(biāo)滑過(guò)所有分類下的二級(jí)分類變換背景色，這設(shè)為藍(lán)色
.popup-content.cats-tree.cat-hd-hover{background:blue;}
16、鼠標(biāo)滑過(guò)所有分類下的三級(jí)分類變換背景色，這設(shè)為深藍(lán)色
.popup-content.cats-tree.snd-cat-hd-hover{background:#160595;}
17、鼠標(biāo)滑過(guò)導(dǎo)航類目下的寶貝分類變換背景色，這設(shè)為藍(lán)色
.menu-popup-cats.sub-cat-hover{background:blue;}
第五部分、鼠標(biāo)滑過(guò)變文字顏色
18、鼠標(biāo)滑過(guò)首頁(yè)/店鋪動(dòng)態(tài)/其它導(dǎo)航類目變換文字顏色，這設(shè)為紅色
.menu-list.menu-hover.title{color:red;}
19、鼠標(biāo)滑過(guò)所有分類（最左邊那個(gè)）變換文字顏色，這同樣設(shè)為紅色
.all-cats-hover.link.title{color:red;}
20、鼠標(biāo)滑過(guò)導(dǎo)航類目下的寶貝分類變換文字顏色，這設(shè)為紅色
.menu-popup-cats.sub-cat-hover.cat-name{color:red;}
21、鼠標(biāo)滑過(guò)所有分類下的二級(jí)分類變換文字顏色，這設(shè)為紅色
.popup-content.cat-hd-hover.cat-name{color:red;}
22、鼠標(biāo)滑過(guò)所有分類下的三級(jí)分類變換文字顏色，這設(shè)為紅色
.popup-content.cats-tree.snd-cat-hd-hover.cat-name{color:red;}
第六部分、導(dǎo)航項(xiàng)目激活狀態(tài)
23、激活項(xiàng)目的文字背景色（難看，所以none）、文字顏色（選白色）
.skin-box-bd.menu-list.menu-selected.link.title{background:none;color:white;}
24、激活項(xiàng)目的項(xiàng)目背景色（項(xiàng)目框），選紫色
.skin-box-bd.menu-list.menu-selected.link{background:purple;}
---------------------------------------------------------------------
注1：顏色代碼可以是英文單詞，如white（白）、black（黑）、red（紅），
也可以是白色#ffffff、黑色#000000等等表示。
注2：背景色也可用圖片，如：｛background:url(圖片地址）;}
去掉所有分類的代碼
.all-cats{display:none}
5、首頁(yè)等分類的右邊的分隔線顏色，設(shè)為白色
.menu-list.menu{border-color:white;}
6、所有分類的右邊的分隔線顏色，設(shè)為白色
.all-cats.link{border-color:white;}
7、首頁(yè)/店鋪動(dòng)態(tài)/其它導(dǎo)航類目的文字顏色
.menu-list.menu.title{color:yellow;}
8、所有分類的文字顏色（最左邊那個(gè)）,
.all-cats.link.title{color:yellow;}
第三部分、分類下的顏色
9、二級(jí)分類的背景色，設(shè)為灰色
.popup-content{background:gray;}
10、三級(jí)分類的背景色，我設(shè)為深灰色
.popup-content.cats-tree.snd-pop-inner{background:#504f4f;}
11、二級(jí)分類的文字顏色，設(shè)為黃色
.popup-content.cat-name{color:yellow;}
12、三級(jí)分類的文字顏色。（如果后面要鼠標(biāo)滑過(guò)變色<21.22>，這句要寫(xiě)）
.popup-content.cats-tree.snd-pop-inner.cat-name{color:yellow;}
第四部分、鼠標(biāo)滑過(guò)變背景色
13、鼠標(biāo)滑過(guò)首頁(yè)/店鋪動(dòng)態(tài)/其它導(dǎo)航類目變換背景色，這設(shè)為藍(lán)色
.menu-list.menu-hover.link{background:blue;}
14、鼠標(biāo)滑過(guò)所有分類（最左邊那個(gè)）變換背景色，這同樣設(shè)為藍(lán)色
.all-cats-hover.link{background:blue;}
15、鼠標(biāo)滑過(guò)所有分類下的二級(jí)分類變換背景色，這設(shè)為藍(lán)色
.popup-content.cats-tree.cat-hd-hover{background:blue;}
16、鼠標(biāo)滑過(guò)所有分類下的三級(jí)分類變換背景色，這設(shè)為深藍(lán)色
.popup-content.cats-tree.snd-cat-hd-hover{background:#160595;}
17、鼠標(biāo)滑過(guò)導(dǎo)航類目下的寶貝分類變換背景色，這設(shè)為藍(lán)色
.menu-popup-cats.sub-cat-hover{background:blue;}
第五部分、鼠標(biāo)滑過(guò)變文字顏色
18、鼠標(biāo)滑過(guò)首頁(yè)/店鋪動(dòng)態(tài)/其它導(dǎo)航類目變換文字顏色，這設(shè)為紅色
.menu-list.menu-hover.title{color:red;}
19、鼠標(biāo)滑過(guò)所有分類（最左邊那個(gè)）變換文字顏色，這同樣設(shè)為紅色
.all-cats-hover.link.title{color:red;}
20、鼠標(biāo)滑過(guò)導(dǎo)航類目下的寶貝分類變換文字顏色，這設(shè)為紅色
.menu-popup-cats.sub-cat-hover.cat-name{color:red;}
21、鼠標(biāo)滑過(guò)所有分類下的二級(jí)分類變換文字顏色，這設(shè)為紅色
.popup-content.cat-hd-hover.cat-name{color:red;}
22、鼠標(biāo)滑過(guò)所有分類下的三級(jí)分類變換文字顏色，這設(shè)為紅色
.popup-content.cats-tree.snd-cat-hd-hover.cat-name{color:red;}
第六部分、導(dǎo)航項(xiàng)目激活狀態(tài)
23、激活項(xiàng)目的文字背景色（難看，所以none）、文字顏色（選白色）
.skin-box-bd.menu-list.menu-selected.link.title{background:none;color:white;}
24、激活項(xiàng)目的項(xiàng)目背景色（項(xiàng)目框），選紫色
.skin-box-bd.menu-list.menu-selected.link{background:purple;}
小結(jié)：最多人忽視這部分，其實(shí)也是很多人想知道的

---------------------------------------------------------------------
注1：顏色代碼可以是英文單詞，如white（白）、black（黑）、red（紅），
也可以是白色#ffffff、黑色#000000等等表示。
注2：背景色也可用圖片，如：｛background:url(圖片地址）;}

去掉所有分類的代碼
.all-cats{display:none}

樂(lè)發(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ī)則

本文來(lái)源： 淘寶店鋪導(dǎo)航CSS代碼詳解

分享與收藏：  網(wǎng)商學(xué)院搜索  告訴好友  關(guān)閉窗口  打印本文 本文關(guān)鍵字：
 
更多..資源下載
淘寶店鋪裝修圖文
淘寶店鋪，天貓店鋪背景固定的方法。 淘寶店鋪裝修如何實(shí)現(xiàn)全屏輪播
7個(gè)步驟打造史上最牛詳情頁(yè) 淘寶裝修子賬號(hào)設(shè)置流程
淘寶店鋪裝修網(wǎng)商學(xué)院推薦
淘寶店鋪裝修點(diǎn)擊排行
 
手機(jī)版 手機(jī)掃描訪問(wèn)
亚洲一级av，黑白配精品在线视频，欧美亚洲综合网站，高清在线无码不卡69 www.sucaiwu.net