淘寶店鋪裝修中修改導(dǎo)航條顏色方法圖文教程

發(fā)布時(shí)間：2015-05-11 17:46:28 作者：佚名

我要評(píng)論

這篇文章主要介紹了淘寶店鋪裝修中修改導(dǎo)航條顏色方法圖文教程,本文用一個(gè)實(shí)際案例講解了一個(gè)彩色導(dǎo)航條的制作過(guò)程,需要的朋友可以參考下

很多淘寶賣(mài)家們?cè)谙螺d了淘寶專(zhuān)業(yè)版模板之后，往往不滿(mǎn)足于模板的色彩搭配，尤其是導(dǎo)航條的色彩，于是想修改導(dǎo)航條的顏色，那么如何修改呢，這里要用到一些代碼。

今天我們給大家提供一款導(dǎo)航條色彩css,操作方法呢也很簡(jiǎn)單。大家只要對(duì)其中的#之后的顏色或者background后面的背景圖片進(jìn)行改變就行了。

導(dǎo)航條色彩css代碼（復(fù)制下面代碼即可）：

復(fù)制代碼

代碼如下:

/* 導(dǎo)航條背景色*/ .skin-box-bd .menu-list{background: none repeat scroll 0 0 #f86c4c}
/*首頁(yè)/店鋪動(dòng)態(tài)背景色*/
.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #f86c4c}
/*首頁(yè)/店鋪動(dòng)態(tài)右邊線(xiàn)*/
.skin-box-bd .menu-list .menu{border-right:1px #f86c4c solid;}
/*首頁(yè)/店鋪動(dòng)態(tài)文字顏色*/
.skin-box-bd .menu-list .menu .title{color:#000000}
/*所有分類(lèi)背景色*/
.all-cats .link{background: none repeat scroll 0 0 #f86c4c;}
/*所有分類(lèi)右邊線(xiàn)*/
.all-cats .link{border-right:1px #f86c4c solid;}
/*所有分類(lèi)文字顏色*/
.skin-box-bd .all-cats .title{color:#000000}
.skin-box-bd{height:35px;background:url(http://www.fzitv.net/shangchuan/20131016111822.jpg) no-repeat 0 0;}
.skin-box-bd a{color:#FFFFFF;font-family:微軟雅黑;font-size:14px;font-weight:normal;}
.skin-box-bd .menu{background:none;line-height:35px;}.skin-box-bd .menu-list{height:35px;}
.skin-box-bd .menu-list .link .title{margin:0px;}
.skin-box-bd .menu-list .link{background:none;height:35px;line-height:35px;padding:0 20px;}
.skin-box-bd .menu-list .menu{padding-right:0px;}
.skin-box-bd.menu-list .menu a{background:url(http://img.taobao.com/L1/142/404327582/assets/images/head/nav_li_bg.jpg) no-repeat right center;font-family:微軟雅黑;font-weight:normal;}
.skin-box-bd .menu-list .menu a:hover{background:url(http://www.fzitv.net/shangchuan/20131016111827.png) no-repeat 0 center;cursor:pointer;}
.skin-box-bd .menu-list .menu a span{font-size:15px;color:#000;}
.skin-box-bd .all-cats .link{background:none;line-height:35px;padding:0 10px;width:168px;}
.skin-box-bd .all-cats .link{background:url(http://www.fzitv.net/shangchuan/20131016111827.png) no-repeat 0 center;border:none;color:#FFF;font-family:微軟雅黑;font-size:15px;font-weight:normal;height:35px;line-height:35px;}
.skin-box-bd .all-cats .link .title{font-size:15px;margin-left:10px;}
.skin-box-bd .all-cats .link .popup-icon{display:none;}
.skin-box-bd .popup-content{background:#F68B8B;border:none;}
.skin-box-bd .popup-content .cats-tree .snd-pop-inner{background:#65B6A4;}
.skin-box-bd .popup-content.cats-tree .cat-hd:hover,.skin-box-bd .popup-content .cats-tree.cat-hd-hover{background:#86CABB;}
.skin-box-bd .popup-content .cats-tree .snd-cat-hd:hover,.skin-box-bd .popup-content .cats-tree .snd-cat-hd-hover{background:#D90724;}
.skin-box-bd .popup-content .cats-tree .has-children{background:none;}
.skin-box-bd .popup-content .cats-tree .fst-cat-icon{background:none;}
.skin-box-bd .popup-content .cats-tree .snd-cat-icon{background:none;}
.skin-box-bd .menu-list .link .popup-icon{display:none;}
.skin-box-bd .menu-popup-cats .sub-cat-hover{background:#86CABB;}

將上面的代碼全選后，復(fù)制，然后打開(kāi)店鋪裝修，點(diǎn)擊到導(dǎo)航條，選擇編輯。

在出現(xiàn)的導(dǎo)航代碼編輯框中，選擇“顯示設(shè)置”，如圖所示：

如何更改導(dǎo)航條顏色