哪里有淘寶導(dǎo)航css代碼？

來(lái)源：http://www.casciot.com.cn 作者：美迪電商學(xué)院發(fā)布時(shí)間：2014-05-17 16:09 點(diǎn)擊：

可能我們要尋找淘寶導(dǎo)航的裝修也是有點(diǎn)困難，怎么說(shuō)困難呢？根據(jù)綜合數(shù)據(jù)分析，不少網(wǎng)站可能是會(huì)公布教程以及代碼，可是代碼卻不完善，而且沒(méi)有專人去跟蹤，或者是根本沒(méi)有代碼的就是在做廣告，那么可能你們覺(jué)得無(wú)助，可能會(huì)去找“淘寶美工速成班那里有？”，不過(guò)為了解決朋友們的困難，本人決定推出多款導(dǎo)航裝修的代碼。

第一款：小清新風(fēng)格淡雅代碼
預(yù)覽效果圖：
淘寶導(dǎo)航css代碼

導(dǎo)航CSS代碼：
.skin-box-bd{background: #FFF; border-top: 1px #CCCCCC dashed;}
.all-cats{background: none; max-width: 300px; _width: 300px;}
.all-cats .link {background:none; border:none;}
.all-cats .link .title {color: #737373; font-weight: bold;}
.all-cats .link .title:hover{color: #333;}
.all-cats .link:hover{background: none;}
.all-cats .link .popup-icon {background: url("http://img02.taobaocdn.com/imgextra/i2/671862285/T2wqfXXjlbXXXXXXXX_!!671862285.png") no-repeat; width: 15px; height: 13px; margin-top: 10px; margin-left: 70px; float: right;}
.popup-content{background: #fff; border: 1px #CCC solid; width: 180px;}
.popup-content .cats-tree .fst-cat {width: 180px; border:none; float: left;}
.popup-content .cats-tree .fst-cat .cat-name {color: #737373; font-weight: normal;}
.popup-content .cats-tree .cat-hd-hover {background: #acd598;}
.popup-content .cats-tree .cat-hd-hover .cat-name {color: #fff;}
.popup-content .cats-tree .snd-pop-inner {background:#fff; border:1px #CCCCCC solid; width: 170px; height: 300px;}
.popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a {color:#737373; font-weight: normal;}
.popup-content .cats-tree .snd-cat-hd-hover {background: none;}
.popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a:hover {color: #000;}
.menu-list {background: none; width: 750px;}
.menu-list .link {background: none;}
.menu-list .menu {background: none; border:none;}
.menu-list .menu .title {color: #737373; font-weight: bold;}
.menu-list .menu-hover .link {background: #acd598;}
.menu-list .menu-hover .link .title {background: none; color: #FFF; border:none;}
.menu-list .menu-selected .link {background: none;}
.menu-list .menu-selected .link .title {background:none;color:#737373;}
.menu-list .menu .popup-content {background: #fff; width: 120px;}
.menu-popup-cats {width: 120px;}
.menu-popup-cats .sub-cat-hover {background: #fff;}
.menu-popup-cats .sub-cat .cat-name {color: #737373;}
.menu-popup-cats .sub-cat-hover .cat-name {color: #000;}
.menu-list .menu .link .popup-icon {background: url("http://img.taobao.com/L1/142/1312847/modules/tshop-pbsm-shop-nav-ch/assets/images/tran.png") no-repeat; width: 9px; height: 8px; margin-top: 11px; margin-left: 10px; float: left; display: inline-block;}

第二款：青色粉紅風(fēng)格代碼
預(yù)覽效果圖：
淘寶導(dǎo)航css代碼

導(dǎo)航CSS代碼：
.skin-box-bd{background: #8bcdbf;} /*整個(gè)導(dǎo)航條的顏色*/
.all-cats{background: #f78d8f;}/*所有分類背景色*/
.all-cats .link {background:none; border:none;} /*此處盡量不要更改*/
.all-cats .link .title {color: #fff;font-weight: bold;}/*所有分類文字的顏色和文字加粗，也可以設(shè)置文字大小、文字類型等屬性*/
.all-cats .link .title:hover{color: #fff;font-weight: bold;}/*鼠標(biāo)停留時(shí)，所有分類文字的顏色*/
.all-cats .link:hover{background:none;}/*鼠標(biāo)停留時(shí),所有分類背景的顏色*/
.popup-content{background: #f78d8f; border:none;}/*一級(jí)子菜單整個(gè)div的屬性*/
.popup-content .cats-tree .fst-cat {border:none;}/*一級(jí)子菜單每個(gè)菜單項(xiàng)的屬性*/
.popup-content .cats-tree .fst-cat .cat-name {color: #fff;} /*一級(jí)子菜單文字的屬性*/
.popup-content .cats-tree .cat-hd-hover {background: #8bcdbf;}/*鼠標(biāo)停留時(shí)一級(jí)子菜單的背景色*/
.popup-content .cats-tree .cat-hd-hover .cat-name {color: #fff;}/*鼠標(biāo)停留時(shí)一級(jí)子菜單的文字*/
.popup-content .cats-tree .snd-pop-inner {background: none;}/*二級(jí)子菜單的背景顏色*/
.snd-pop-inner .fst-cat-bd .snd-cat-hd{background:#77bdae;}/*二級(jí)子菜單每個(gè)菜單項(xiàng)的背景色*/
.popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a {color:#fff;}/*二級(jí)子菜單的文字的屬性*/
.popup-content .cats-tree .snd-cat-hd-hover {background: #f78d8f;}/*鼠標(biāo)停留時(shí)二級(jí)子菜單背景的顏色*/
.popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a:hover {color: #fff;}/*鼠標(biāo)停留時(shí)二級(jí)子菜單的文字顏色*/
.menu-list {background: none;} /*其他菜單整個(gè)div的背景顏色*/
.menu-list .link {background: none;}
.menu-list .menu {background: none; border:none;} /*其他菜單每個(gè)菜單項(xiàng)的背景顏色*/
.menu-list .menu .title {color: #fff;font-weight: bold;} /*其他菜單每個(gè)菜單項(xiàng)的文字屬性*/
.menu-list .menu-hover .link {background: #f78d8f;} /*鼠標(biāo)停留時(shí)，其他菜單的菜單項(xiàng)的背景顏色*/
.menu-list .menu-hover .link .title {background: none; color: #FFF; border:none;}/*鼠標(biāo)停留時(shí)其他菜單的菜單項(xiàng)的文字屬性*/
.menu-list .menu-selected .link {background: none;}
.menu-list .menu-selected .link .title {background: none; color:#fff;}/*當(dāng)前選中的菜單項(xiàng)的背景顏色和文字顏色*/

第三款：完全透明導(dǎo)航代碼
預(yù)覽效果圖：
淘寶導(dǎo)航css代碼

導(dǎo)航CSS代碼：
.skin-box-bd{background:none;border:none;}
.menu-list{background:none;}
.link{background:none;border:none;}
.menu{background:none;}
.all-cats{background:none;}
.skin-box-bd .all-cats .link{border:none;}
.skin-box-bd .menu-list .menu{border:none;}
.menu-list .menu .title{color:#000000;font-size:15px;font-weight:bold;}
.all-cats .link .title{color:#000000;font-size:15px;font-weight:bold;}
.skin-box-bd .menu-list .menu-selected .link{background:none;}
.skin-box-bd .menu-list .menu-selected .link .title{background:none;}

第四款：綠色經(jīng)典風(fēng)格代碼
預(yù)覽效果圖：
淘寶導(dǎo)航css代碼

導(dǎo)航CSS代碼：
.skin-box-bd{background:#272626;}
.skin-box-bd .menu-list{background:#272626;}
.skin-box-bd .menu-list .menu{background:#272626;border:0px solid red;}
.skin-box-bd .menu-list .menu .link{background:#272626;color:#FFFFFF;width:60px;margin:0px;padding:0px;text-align:center;}
.skin-box-bd .menu-list .menu .link:hover{background:#0B7D13;color:#FFFFFF;width:60px;margin:0px;padding:0px;text-align:center;}
.skin-box-bd .menu-list .menu .title{color:#FFFFFF;background:#272626;width:60px;margin:0px;padding:0px;text-align:center;}
.skin-box-bd .menu-list .menu .title:hover{color:#FFFFFF;background:#0B7D13;width:60px;margin:0px;padding:0px;text-align:center;}
.all-cats{background:#0B7D13;}
.all-cats .link{background:#0B7D13;color:#FFFFFF;border:0px solid red;}
.all-cats .link:hover{background:#0B7D13;color:#FFFFFF;}
.all-cats .link .title{color:#FFFFFF;}
.all-cats .link .title:hover{color:#FFFFFF;}
.popup-content .popup-inner{background:#272626;}
.popup-content .cat-name{color:#FFFFFF;background:#272626;border:0px solid red;}
.popup-content .cat-name:hover{color:#FFFFFF;background:#0B7D13;}#page #content
.popup-inner .cats-tree .fst-cat{background:#272626;}
.snd-pop-inner{background:#272626;border:0px solid red;}
.snd-pop-inner .fst-cat-bd .snd-cat-name{color:#FFFFFF;background:#272626;}
.snd-pop-inner .fst-cat-bd .snd-cat-name:hover{color:#FFFFFF;background:#0B7D13;}

上面可能已經(jīng)說(shuō)了一些代碼，但是要怎么裝修的話，詳情裝修教程還是跳到http://www.casciot.com.cn/share/clipart/336.html 。