可能我們要尋找淘寶導航的裝修也是有點困難,怎么說困難呢?根據綜合數據分析,不少網站可能是會公布教程以及代碼,可是代碼卻不完善,而且沒有專人去跟蹤,或者是根本沒有代碼的就是在做廣告,那么可能你們覺得無助,可能會去找“淘寶美工速成班那里有?”,不過為了解決朋友們的困難,本人決定推出多款導航裝修的代碼。
第一款:小清新風格淡雅代碼
預覽效果圖:
![淘寶導航css代碼](http://m.gooddi.cn/file/upload/201510/07/10-33-04-61-1.jpg)
導航CSS代碼:
.skin-box-bd{background:#FFF;border-top:1px#CCCCCCdashed;}
.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#CCCsolid;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#CCCCCCsolid;width:170px;height:300px;}
.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda{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-hda: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;}
第二款:青色粉紅風格代碼
預覽效果圖:
![淘寶導航css代碼](http://m.gooddi.cn/file/upload/201510/07/10-33-04-90-1.jpg)
導航CSS代碼:
.skin-box-bd{background:#8bcdbf;}
.all-cats{background:#f78d8f;}
.all-cats.link{background:none;border:none;}
.all-cats.link.title{color:#fff;font-weight:bold;}
.all-cats.link.title:hover{color:#fff;font-weight:bold;}
.all-cats.link:hover{background:none;}
.popup-content{background:#f78d8f;border:none;}
.popup-content.cats-tree.fst-cat{border:none;}
.popup-content.cats-tree.fst-cat.cat-name{color:#fff;}
.popup-content.cats-tree.cat-hd-hover{background:#8bcdbf;}
.popup-content.cats-tree.cat-hd-hover.cat-name{color:#fff;}
.popup-content.cats-tree.snd-pop-inner{background:none;}
.snd-pop-inner.fst-cat-bd.snd-cat-hd{background:#77bdae;}
.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda{color:#fff;}
.popup-content.cats-tree.snd-cat-hd-hover{background:#f78d8f;}
.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda:hover{color:#fff;}
.menu-list{background:none;}
.menu-list.link{background:none;}
.menu-list.menu{background:none;border:none;}
.menu-list.menu.title{color:#fff;font-weight:bold;}
.menu-list.menu-hover.link{background:#f78d8f;}
.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:#fff;}
第三款:完全透明導航代碼
預覽效果圖:
![淘寶導航css代碼](http://m.gooddi.cn/file/upload/201510/07/10-33-04-84-1.jpg)
導航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;}
第四款:綠色經典風格代碼
預覽效果圖:
![淘寶導航css代碼](http://m.gooddi.cn/file/upload/201510/07/10-33-04-61-1.jpg)
導航CSS代碼:
.skin-box-bd{background:#272626;}
.skin-box-bd.menu-list{background:#272626;}
.skin-box-bd.menu-list.menu{background:#272626;border:0pxsolidred;}
.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:0pxsolidred;}
.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:0pxsolidred;}
.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:0pxsolidred;}
.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;}
上面可能已經說了一些代碼,但是要怎么裝修的話,詳情裝修教程還是跳到http://www.mede.com.cn/share/clipart/336.html。
第一款:小清新風格淡雅代碼
預覽效果圖:
![淘寶導航css代碼](http://m.gooddi.cn/file/upload/201510/07/10-33-04-61-1.jpg)
導航CSS代碼:
.skin-box-bd{background:#FFF;border-top:1px#CCCCCCdashed;}
.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#CCCsolid;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#CCCCCCsolid;width:170px;height:300px;}
.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda{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-hda: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;}
第二款:青色粉紅風格代碼
預覽效果圖:
![淘寶導航css代碼](http://m.gooddi.cn/file/upload/201510/07/10-33-04-90-1.jpg)
導航CSS代碼:
.skin-box-bd{background:#8bcdbf;}
.all-cats{background:#f78d8f;}
.all-cats.link{background:none;border:none;}
.all-cats.link.title{color:#fff;font-weight:bold;}
.all-cats.link.title:hover{color:#fff;font-weight:bold;}
.all-cats.link:hover{background:none;}
.popup-content{background:#f78d8f;border:none;}
.popup-content.cats-tree.fst-cat{border:none;}
.popup-content.cats-tree.fst-cat.cat-name{color:#fff;}
.popup-content.cats-tree.cat-hd-hover{background:#8bcdbf;}
.popup-content.cats-tree.cat-hd-hover.cat-name{color:#fff;}
.popup-content.cats-tree.snd-pop-inner{background:none;}
.snd-pop-inner.fst-cat-bd.snd-cat-hd{background:#77bdae;}
.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda{color:#fff;}
.popup-content.cats-tree.snd-cat-hd-hover{background:#f78d8f;}
.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda:hover{color:#fff;}
.menu-list{background:none;}
.menu-list.link{background:none;}
.menu-list.menu{background:none;border:none;}
.menu-list.menu.title{color:#fff;font-weight:bold;}
.menu-list.menu-hover.link{background:#f78d8f;}
.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:#fff;}
第三款:完全透明導航代碼
預覽效果圖:
![淘寶導航css代碼](http://m.gooddi.cn/file/upload/201510/07/10-33-04-84-1.jpg)
導航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;}
第四款:綠色經典風格代碼
預覽效果圖:
![淘寶導航css代碼](http://m.gooddi.cn/file/upload/201510/07/10-33-04-61-1.jpg)
導航CSS代碼:
.skin-box-bd{background:#272626;}
.skin-box-bd.menu-list{background:#272626;}
.skin-box-bd.menu-list.menu{background:#272626;border:0pxsolidred;}
.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:0pxsolidred;}
.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:0pxsolidred;}
.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:0pxsolidred;}
.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;}
上面可能已經說了一些代碼,但是要怎么裝修的話,詳情裝修教程還是跳到http://www.mede.com.cn/share/clipart/336.html。
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源: 哪里有淘寶導航css代碼?