天天爽天天-开心激情五月网-色悠悠国产-亚洲乱码伦小说区-jizzjizz黄大片-精品一区二区三区三区-爱啪啪av网-亚洲一区二区影院-成人自拍视频在线观看-麻花传媒在线观看免费-日韩中文字幕国产-亚洲a∨无码一区二区三区-国产午夜福利精品-68日本xxxxxⅹxxx22-奇米影视77777-日本久久精品视频-天天看天天色

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

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

放大字體  縮小字體 發(fā)布日期:2025-10-28 09:39:42  來(lái)源:電商聯(lián)盟  作者:樂(lè)發(fā)網(wǎng)  瀏覽次數(shù):40

{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>,這句要寫)
.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>,這句要寫)
.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}

快消品貨源網(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)鍵字:
 
更多..資源下載
淘寶店鋪裝修圖文
去空白間隙全屏裝修代碼分享 7個(gè)步驟打造史上最牛詳情頁(yè)
淘寶裝修子賬號(hào)設(shè)置流程 備戰(zhàn)雙十一:教你設(shè)計(jì)一個(gè)高轉(zhuǎn)化的詳情頁(yè)
淘寶店鋪裝修網(wǎng)商學(xué)院推薦
淘寶店鋪裝修點(diǎn)擊排行
 
手機(jī)版 手機(jī)掃描訪問(wèn)
禄劝| 廉江市| 乐东| 神农架林区| 荣昌县| 玉林市| 射洪县| 县级市| 龙州县| 辽阳县| 曲阜市| 上高县| 邢台市| 博白县| 九龙县| 龙泉市| 鹿泉市| 肃宁县| 娄底市| 襄城县| 黑水县| 青海省| 武强县| 鄂州市| 安顺市| 乌鲁木齐市| 永顺县| 汉源县| 双城市| 永嘉县| 昌宁县| 南投市| 湾仔区| 高雄县| 水富县| 洞口县| 上蔡县| 邓州市| 阳谷县| 淄博市| 德兴市|