?咨詢郵箱：
淘寶店鋪導航CSS代碼介紹以及使用方法
發表日期：2014-10-12 10:38?? 文章編輯：350模板官網小編 ?? 瀏覽次數：
350模板的可視化編輯，讓大家都很輕松的完成導航設計， 下面我還是給大家說說css的只是吧。
自從新版旺鋪開放了導航css自定義模塊后，淘寶店鋪裝修就變得漂亮了，利用導航css代碼可以輕松實現店鋪背景固定，全屏店鋪背景效果。以及導航透明效果的制作都離不開店鋪導航css代碼的使用。下面將為大家介紹淘寶店鋪導航中css的一些常見代碼效果的介紹以及使用方法。 以下代碼看懂需要學習css一些基礎知識哦。
自從新版旺鋪開放了導航css自定義模塊后，淘寶店鋪裝修就變得漂亮了，利用導航css代碼可以輕松實現店鋪背景固定，全屏店鋪背景效果。以及導航透明效果的制作都離不開店鋪導航css代碼的使用。下面將為大家介紹淘寶店鋪導航中css的一些常見代碼效果的介紹以及使用方法。 以下代碼看懂需要學習css一些基礎知識哦。
導航欄CSS常見代碼介紹：
{height:28px!important;width:950px!important;overflow:hidden;display:block!important;font-size:14px;font-weight:500;}
a:hover
{ //鼠標滑過效果
text-decoration:none;background:#C0D9D9;font-size:14px;font-weight:500;}
.skin-box-bd
{ //導航框
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
{ //所有分類箭頭圖標
background-image:none;
background-color:transparent;
}
.popup-icon
{ //所有分類箭頭圖標
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
{ //導航菜單文字
color:red;
font-size:14px;font-weight:500;}
.menu-list .menu-hover .link
{ //導航菜單滑過
display:block;background:#C0D9D9;}
.menu-list .menu-hover .link .title
{ //導航菜單滑過文字
color:green;
display:block;background:#C0D9D9;}
.menu-list .menu-selected
{ //當前顯示頁面菜單
display:block;background:#C0D9D9;}
.menu-list .menu-selected .link
{ //當前顯示頁面鏈接
border-bottom-color:red;
background- color:#C0D9D9;display:block;}
.menu-list .menu-selected .link .title
{ //當前頁面顯示文字
display:block;
color:gray;
height:28px;
border-bottom-color:white;
background-color:#C0D9D9;
}
導航欄CSS代碼詳解顏色
第一部分、靜態背景顏色
1、首頁/店鋪動態/其它導航類目的背景色，這里設為紅色
.skin-box-bd .menu-list .link{background:red;}
2、所有分類的背景色（最左邊的），一樣設為紅色
.all-cats .link{background:red;}
到這里，發覺右邊的顏色還沒有變呢，好的，接著下一步
3、導航條整個分類段背景色，還是要設為紅色，整體布局好看些
.skin-box-bd .menu-list{background:red;}
注意觀察，最右邊還有一絲地方沒有變
4、導航條背景色（是最底層了吧），修補導航右側缺口，再設為紅色
.skin-box-bd{background:red;}
{height:28px!important;width:950px!important;overflow:hidden;display:block!important;font-
size:14px;font-weight:500;}
a:hover
{ //鼠標滑過效果
text-decoration:none;background:#C0D9D9;font-size:14px;font-weight:500;}
.skin-box-bd
{ //導航框
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
{ //所有分類箭頭圖標
background-image:none;
background-color:transparent;
}
.popup-icon
{ //所有分類箭頭圖標
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
{ //導航菜單文字
color:red;
font-size:14px;font-weight:500;}
.menu-list .menu-hover .link
{ //導航菜單滑過
display:block;background:#C0D9D9;}
.menu-list .menu-hover .link .title
{ //導航菜單滑過文字
color:green;
display:block;background:#C0D9D9;}
.menu-list .menu-selected
{ //當前顯示頁面菜單
display:block;background:#C0D9D9;}
.menu-list .menu-selected .link
{ //當前顯示頁面鏈接
border-bottom-color:red;
background- color:#C0D9D9;display:block;}
.menu-list .menu-selected .link .title
{ //當前頁面顯示文字
display:block;
color:gray;
height:28px;
border-bottom-color:white;
background-color:#C0D9D9;
}
第一部分、靜態背景顏色
1、首頁/店鋪動態/其它導航類目的背景色，這里設為紅色
.skin-box-bd .menu-list .link{background:red;}
2、所有分類的背景色（最左邊的），一樣設為紅色
.all-cats .link{background:red;}
到這里，發覺右邊的顏色還沒有變呢，好的，接著下一步
3、導航條整個分類段背景色，還是要設為紅色，整體布局好看些
.skin-box-bd .menu-list{background:red;}
注意觀察，最右邊還有一絲地方沒有變
4、導航條背景色（是最底層了吧），修補導航右側缺口，再設為紅色
.skin-box-bd{background:red;}
第二部分、分隔線、靜態文字的顏色
5、首頁等分類的右邊的分隔線顏色，設為白色
.menu-list .menu{border-color:white;}
6、所有分類的右邊的分隔線顏色，設為白色
.all-cats .link{border-color:white;}
7、首頁/店鋪動態/其它導航類目的文字顏色
.menu-list .menu .title{color:yellow;}
8、所有分類的文字顏色（最左邊那個）,
.all-cats .link .title{color:yellow;}
第三部分、分類下的顏色
9、二級分類的背景色，設為灰色
.popup-content{background:gray;}
10、三級分類的背景色，我設為深灰色
.popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
11、二級分類的文字顏色，設為黃色
.popup-content .cat-name{color:yellow;}
12、三級分類的文字顏色。（如果后面要鼠標滑過變色<21.22>，這句要寫）
.popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;}
第四部分、鼠標滑過變背景色
13、鼠標滑過首頁/店鋪動態/其它導航類目變換背景色，這設為藍色
.menu-list .menu-hover .link{background:blue;}
14、鼠標滑過所有分類（最左邊那個）變換背景色，這同樣設為藍色
.all-cats-hover .link{background:blue;}
15、鼠標滑過所有分類下的二級分類變換背景色，這設為藍色
.popup-content .cats-tree .cat-hd-hover{background:blue;}
16、鼠標滑過所有分類下的三級分類變換背景色，這設為深藍色
.popup-content .cats-tree .snd-cat-hd-hover{background:#160595;}
17、鼠標滑過導航類目下的寶貝分類變換背景色，這設為藍色
.menu-popup-cats .sub-cat-hover{background:blue;}
第五部分、鼠標滑過變文字顏色
18、鼠標滑過首頁/店鋪動態/其它導航類目變換文字顏色，這設為紅色
.menu-list .menu-hover .title{color:red;}
19、鼠標滑過所有分類（最左邊那個）變換文字顏色，這同樣設為紅色
.all-cats-hover .link .title{color:red;}
20、鼠標滑過導航類目下的寶貝分類變換文字顏色，這設為紅色
.menu-popup-cats .sub-cat-hover .cat-name{color:red;}
21、鼠標滑過所有分類下的二級分類變換文字顏色，這設為紅色
.popup-content .cat-hd-hover .cat-name{color:red;}
22、鼠標滑過所有分類下的三級分類變換文字顏色，這設為紅色
.popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:red;}
第六部分、導航項目激活狀態
23、激活項目的文字背景色（難看，所以none）、文字顏色（選白色）
.skin-box-bd .menu-list .menu-selected .link .title{background:none;color:white;}
24、激活項目的項目背景色（項目框），選紫色
.skin-box-bd .menu-list .menu-selected .link{background:purple;}
注1：顏色代碼可以是英文單詞，如white（白）、black（黑）、red（紅），
也可以是白色#ffffff、黑色#000000等等表示。
注2：背景色也可用圖片，如：｛background:url(圖片地址）;}
去掉所有分類的代碼
.all-cats{display:none}
5、首頁等分類的右邊的分隔線顏色，設為白色
.menu-list .menu{border-color:white;}
6、所有分類的右邊的分隔線顏色，設為白色
.all-cats .link{border-color:white;}
7、首頁/店鋪動態/其它導航類目的文字顏色
.menu-list .menu .title{color:yellow;}
8、所有分類的文字顏色（最左邊那個）,
.all-cats .link .title{color:yellow;}
第三部分、分類下的顏色
9、二級分類的背景色，設為灰色
.popup-content{background:gray;}
10、三級分類的背景色，我設為深灰色
.popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
11、二級分類的文字顏色，設為黃色
.popup-content .cat-name{color:yellow;}
12、三級分類的文字顏色。（如果后面要鼠標滑過變色<21.22>，這句要寫）
.popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;}
第四部分、鼠標滑過變背景色
13、鼠標滑過首頁/店鋪動態/其它導航類目變換背景色，這設為藍色
.menu-list .menu-hover .link{background:blue;}
14、鼠標滑過所有分類（最左邊那個）變換背景色，這同樣設為藍色
.all-cats-hover .link{background:blue;}
15、鼠標滑過所有分類下的二級分類變換背景色，這設為藍色
.popup-content .cats-tree .cat-hd-hover{background:blue;}
16、鼠標滑過所有分類下的三級分類變換背景色，這設為深藍色
.popup-content .cats-tree .snd-cat-hd-hover{background:#160595;}
17、鼠標滑過導航類目下的寶貝分類變換背景色，這設為藍色
.menu-popup-cats .sub-cat-hover{background:blue;}
第五部分、鼠標滑過變文字顏色
18、鼠標滑過首頁/店鋪動態/其它導航類目變換文字顏色，這設為紅色
.menu-list .menu-hover .title{color:red;}
19、鼠標滑過所有分類（最左邊那個）變換文字顏色，這同樣設為紅色
.all-cats-hover .link .title{color:red;}
20、鼠標滑過導航類目下的寶貝分類變換文字顏色，這設為紅色
.menu-popup-cats .sub-cat-hover .cat-name{color:red;}
21、鼠標滑過所有分類下的二級分類變換文字顏色，這設為紅色
.popup-content .cat-hd-hover .cat-name{color:red;}
22、鼠標滑過所有分類下的三級分類變換文字顏色，這設為紅色
.popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:red;}
第六部分、導航項目激活狀態
23、激活項目的文字背景色（難看，所以none）、文字顏色（選白色）
.skin-box-bd .menu-list .menu-selected .link .title{background:none;color:white;}
24、激活項目的項目背景色（項目框），選紫色
.skin-box-bd .menu-list .menu-selected .link{background:purple;}
小結：最多人忽視這部分，其實也是很多人想知道的
注1：顏色代碼可以是英文單詞，如white（白）、black（黑）、red（紅），
也可以是白色#ffffff、黑色#000000等等表示。
注2：背景色也可用圖片，如：｛background:url(圖片地址）;}
去掉所有分類的代碼
.all-cats{display:none}
標簽： ? ?
如沒特殊注明，文章均為350模板官網原創,轉載請注明來自http://www.eesewex8.cn//zxzs/82.html