淘宝店铺装修中修改导航条颜色方法图文教程
发布时间:2015-05-11 17:46:28 作者:佚名 我要评论
这篇文章主要介绍了淘宝店铺装修中修改导航条颜色方法图文教程,本文用一个实际案例讲解了一个彩色导航条的制作过程,需要的朋友可以参考下
很多淘宝卖家们在下载了淘宝专业版模板之后,往往不满足于模板的色彩搭配,尤其是导航条的色彩,于是想修改导航条的颜色,那么如何修改呢,这里要用到一些代码。
今天我们给大家提供一款导航条色彩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;}
将上面的代码全选后,复制,然后打开店铺装修,点击到导航条,选择编辑。
在出现的导航代码编辑框中,选择“显示设置”,如图所示:
将代码黏贴到编辑框中,选择确定。
然后保存就可以看到效果了。
如果你对这个色彩不满意,可以对代码中的 background及其#后面的颜色进行修改。
相关文章
- 千牛怎么发淘宝店铺公告?店铺需要些公告,该怎么写呢?我们可以使用千牛软件写,下面我们就来看看 千牛写店铺公告的技巧2022-04-06
- 淘宝店铺怎么添加悬浮导航?淘宝店铺想要装修一下,添加悬浮导航,该怎么添加呢?下面我们就来看看淘宝悬浮导航的做法,详细请看下文介绍2021-07-15
- 用户从商品界面进入到店铺首页的时候,如果能给用户留下深刻的印象说不定就能成一笔订单,或者多一个粉丝,那么怎么装修店铺首页效果最好呢2021-06-02
- 在淘宝平台上开店,作为淘宝的店家大家都很重视本身门店的浏览量,有很多方法可以提高商铺的点击率,那么也可以通过装修淘宝店铺提高点击率,一起来看看吧2021-05-19
- 手机淘宝的首页是最好的展示位置,对于淘宝商家们而言,如果自己店铺的商品能够上手渔首页的话,肯定能够获得不少的流量,那么店铺宝贝应该如何才能上手淘的首页呢2021-05-11
- 现在的淘宝店铺搜索有pc端搜索的也有手机淘宝搜索的,有的店铺手机淘宝搜索占的占的比重是比较大。如果淘宝店铺手淘搜索下滑,淘宝卖家应该如何补救呢2021-05-11
- 身为淘宝卖家你们也应该都知道现在在淘宝上的竞争压力是与日俱增,所以有很多的人都发现自己是在是获得不到流量,所以下面我就来教大家一下怎么样去装修能够获得更多的流量2021-05-11
- 现在随着手机淘宝的出现,手机端已经逐渐取代了电脑端了,所以作为淘宝卖家就一定要将手机淘宝给重视起来了,下面我就来给大家讲一下如何做一个好的店铺装修去吸引流量吧2021-05-11
- 电商经济的发展也会使网店创业成为更多数人的选择,但因为现在网店运营需要很强的技巧性,不少网店运营困难。在这样的情况下,选择在网店设计装修上下功夫的人也多了起来,2021-04-29
- 淘宝店铺怎么装修手机无线端?淘宝店铺想要手机端也装修,该怎么操作呢?下面我们就来看看手机无线端淘宝店铺装修方法,需要的朋友可以参考下2021-02-06
最新评论