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

所属分类: 电子商务 / 淘宝/天猫 阅读数: 1919
收藏 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及其#后面的颜色进行修改。

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

2015双11天猫超市组合优惠是什么 双11天猫超市优惠活动介绍

虽然离双11还有一段时间,但为了回馈广大用户,天猫双11超市已经开启了一系列的优惠活动,信用满90就可以减50哦,如果你还不知道双11天猫超市组合优惠是什么
收藏 0 赞 0 分享

2015天猫双十一超级红包怎么免费领取?双11狂欢节超级红包活动说明

双11今年又有新发样,那就是双十一超级红包,天猫官方推出站外发放双11红包的途径,本站将于24日发送天猫双11全站通用的超级红包,欢迎各位前来领取,千万不要错过哦
收藏 0 赞 0 分享

2015天猫双11万店同庆以旧换新 先试后买活动参加地址与规则流程介绍

2015天猫双11即将到来,天猫也推出了万店同庆以旧换新、先试后买、上门安装等一系列优惠活动,不过有些朋友对天猫双11的万店同庆活动还不是很了解,2015天猫双11万店同庆以旧换新、先试后买活动在哪参加,规则流程等
收藏 0 赞 0 分享

2015天猫扫双11标志领取现金红包 双十一扫logo赢红包活动攻略

双十一活动,已经正式来开序幕后,那么很多互动性较强的红包活动也将会随之出炉。比如今天为大家推荐的扫logo免费抽取双十一红包的活动,大家打开自己的APP后,使用扫一扫功能,就能获取红包哦,喜欢的朋友们详情来看看了解一下
收藏 0 赞 0 分享

2015天猫双十一微博红包怎么抽奖?双11微博红包抽奖详情

2015天猫双11快到了,不过现在已经有很多天猫双11的预热活动了,其中抢红包是大家很关注的热点,那么2015天猫双11微博红包怎么抽奖呢?小编就为大家介绍2015天猫双11微博红包抽奖详细内容
收藏 0 赞 0 分享

天猫收货评价规则更改:发货速度被物流服务取代

天猫收货评价规则更改了,以后大家在确认付款之后,看不到发货速度这一栏,取而代替的是物流服务,并已于昨日(7月29日)正式生效
收藏 0 赞 0 分享

淘宝卖家怎么开通信用卡支付?

淘宝卖家怎么开通信用卡支付?在淘宝购物的时候,我们作为卖家也可以接受信用卡的付款啦。卖家信用卡服务功能开通是免费的,买家购买商品使用信用卡付款不需要支付任何费用,卖家需要支付交易金额(包括运费)的1%作为交易手续费,下面分享开通方法
收藏 0 赞 0 分享

天猫卖家怎么申请退出天猫?天猫关闭店铺的详细流程

天猫卖家怎么申请退出天猫?现在网店越来越难开,不光是淘宝,现在天猫邓毅也很不好,很多的淘宝天猫商户也不怎么赚钱,有的人就想退出天猫店铺。天猫线上化退出流程是怎么样的呢?下面我们一起来看看关闭天猫店铺的详细教程
收藏 0 赞 0 分享

在天猫购物的时候使用的分期怎么提前还款?

在天猫购物的时候使用的分期怎么提前还款?没发工资的时候,在天猫申请了分期付款,但是发工资了,想提前把钱还了,该怎么申请呢?下面分享天猫主动还款的详细教程,需要的朋友可以参考下
收藏 0 赞 0 分享

激活天猫会员要钱吗?快速激活天猫会员的教程

激活天猫会员要钱吗?天猫用户在天猫有过实物交易且完整填写个人信息后可激活成为天猫会员。天猫会员尊享会员生日特权、服务特权、品牌特权、行业特权等专属特权。下面分享快速激活天猫会员的教程
收藏 0 赞 0 分享
查看更多