淘宝店铺装修中修改导航条颜色方法图文教程

所属分类: 电子商务 / 淘宝/天猫 阅读数: 1912
收藏 0 赞 0 分享

很多淘宝卖家们在下载了淘宝专业版模板之后,往往不满足于模板的色彩搭配,尤其是导航条的色彩,于是想修改导航条的颜色,那么如何修改呢,这里要用到一些代码。

今天我们给大家提供一款导航条色彩css,操作方法呢也很简单。大家只要对其中的#之后的颜色或者background后面的背景图片进行改变就行了。

导航条色彩css代码(复制下面代码即可):


复制代码
代码如下:

/* 导航条背景色*/ .skin-box-bd .menu-list{background: none repeat scroll 0 0 #f86c4c}
/*首页/店铺动态背景色*/
.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #f86c4c}
/*首页/店铺动态右边线*/
.skin-box-bd .menu-list .menu{border-right:1px #f86c4c solid;}
/*首页/店铺动态文字颜色*/
.skin-box-bd .menu-list .menu .title{color:#000000}
/*所有分类背景色*/
.all-cats .link{background: none repeat scroll 0 0 #f86c4c;}
/*所有分类右边线*/
.all-cats .link{border-right:1px #f86c4c solid;}
/*所有分类文字颜色*/
.skin-box-bd .all-cats .title{color:#000000}
.skin-box-bd{height:35px;background:url(https://www.jb51.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(https://www.jb51.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(https://www.jb51.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;}

  

将上面的代码全选后,复制,然后打开店铺装修,点击到导航条,选择编辑。

在出现的导航代码编辑框中,选择“显示设置”,如图所示:

如何更改导航条颜色

将代码黏贴到编辑框中,选择确定。

然后保存就可以看到效果了。

2

如果你对这个色彩不满意,可以对代码中的 background及其#后面的颜色进行修改。

更多精彩内容其他人还在看

天猫分期怎么查额度?天猫分期信用、消费额度查询方法

天猫分期额度查询方法来咯~小编将在下文演示天猫分期购查看额度步骤,该如何知道自己有多少分期额度呢?去哪里查询呢?请按照下文步骤来操作吧
收藏 0 赞 0 分享

天猫分期购是什么?天猫分期购额度查询的方法

随着“双十一”的临近,天猫为了鼓励消费者参与本年度的狂欢购物节,除了大量备货外,还与“蚂蚁小贷”合作,再次推出了“分期购”业务。那么如何查询额度呢?下面就给大家讲解下
收藏 0 赞 0 分享

2014淘宝双十二的玩法以及活动规则攻略抢先看

双十一就快开始了,很多商家已经开始筹备双十二了,那么淘宝双十二的玩法、活动规则攻略是什么呢?下面一起来看一下
收藏 0 赞 0 分享

手机淘宝店铺如何装修?手机淘宝店铺装修教程

手机淘宝店铺如何装修?下面的文字就给大家详细介绍下,希望可以帮助到大家
收藏 0 赞 0 分享

如何使用天猫双11官方爆款清单?2014天猫双11官方爆款清单下载使用指南

如何查看天猫双11官方爆款清单?下面的文字小编就给大家详细介绍下关于2014天猫双11官方爆款清单下载使用指南,希望可以帮助到大家
收藏 0 赞 0 分享

2014天猫双十一玩游戏抽红包方法图解

下面脚本之家小编为大家带来了2014天猫双十一玩游戏抽红包方法,这种方法经过实验测试过的,玩的次数越多,中的概率越大,一起来学习吧
收藏 0 赞 0 分享

天猫分期额度提升有什么方法 天猫分期购额度提升方法技巧

天猫分期购额度提升方法技巧分享给各位朋友们,希望对大家有所帮助哦!
收藏 0 赞 0 分享

2014天猫双11神秘包裹里的奖品是什么?

2014天猫双11神秘包裹里的奖品是什么?现在很多网友都很想知道,下面小编就为大家公布天猫神秘包裹奖品内容,一起来看看吧
收藏 0 赞 0 分享

天猫分期购免冻结金额需要什么 天猫分期免冻结金额数目

有很多朋友问天猫分期免冻结金额要求是什么,大家都不理解为什么天猫分期购要冻结一定的资金在余额宝里,能不能不冻结呢?接下来大家和小编一起来了解详情吧
收藏 0 赞 0 分享

天猫分期暂不可用是为什么?怎么办?

天猫分期暂不可用是为什么呢?下文将告诉大家天猫分期暂不可用原因,不理解的朋友们和小编一起通过下文来了解下哦
收藏 0 赞 0 分享
查看更多