淘宝导航栏颜色怎么改?教程在此!

  导航是店铺不可或缺的部分,有条理的将产品分类展示,可以让买家更加快捷找到自己所需要的商品,有一些卖家想要让效果更加好,想要改变导航栏的颜色,所以今天本站小编为大家准备了教程,赶紧去看看吧!

  1、进入卖家中心,点击“店铺装修”,即可进入装修界面。将鼠标放置导航条位置,即可出现编辑按钮,点击“编辑”

  2、进入编辑界面后,会出现两个选项,“导航设置”和“显示设置”,“导航设置”就是如下图所示添加或删除导航条的内容,或者将某一项上移或下移。在此重点讲解一下“显示设置”

  导航条的“显示设置”是通过一些固定的淘宝店铺装修代码来实现设置的。

  在此我们设置一个导航条的导航条背景色为绿色,首页/店铺动态背景色为白色,首页/店铺动态右边线为墨绿色,首页/店铺动态文字颜色蓝紫色,所有分类背景色牡丹红,所有分类右边线青铜色,所有分类文字颜色黄色。当然这个搭配肯定不会美观的,只是举这么个例子。

  可以根据自己的喜好和美观来搭配颜色。规定好颜色之后,就可以把以下代码编辑到“显示设置”的输入框内。点击“确认”即可完成设置。其中/* */内的文字为注释文字,不影响代码内容。

  /* 导航条背景色*/

  .skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}

  /*首页/店铺动态背景色*/

  .skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #FFFFFF;}

  /*首页/店铺动态右边线*/

  .skin-box-bd .menu-list .menu{border-right:1px #006205 solid;}

  /*首页/店铺动态文字颜色*/

  .skin-box-bd .menu-list .menu .title{color: #9F5F9F}

  /*所有分类背景色*/

  .all-cats .link{background: none repeat scroll 0 0 #FF00FF;}

  /*所有分类右边线*/

  .all-cats .link{border-right:1px #8C7853 solid;}

  /*所有分类文字颜色*/

  .skin-box-bd .all-cats .title{color: #FFFF00}

  附:颜色代码

  1 白颜色 #FFFFFF 2 红颜色 #FF0000 3 绿颜色 #00FF00

  4 蓝颜色 #0000FF 5 牡丹红 #FF00FF 6 青颜色 #00FFFF

  7 黄颜色 #FFFF00 8 黑颜色 #000000 9 海颜蓝 #70DB93

  10 巧克力色 #5C3317 11 蓝紫色 #9F5F9F 12 黄铜色 #B5A642

  13 亮金色 #D9D919 14 棕色 #A67D3D 15 青铜色 #8C7853

  16 2号青铜色 #A67D3D 17 士官服蓝色 #5F9F9F 18 冷铜色 #D98719

  19 铜色 #B87333 20 珊瑚红 #FF7F00 21 紫蓝色 #42426F

  更改导航栏颜色的教程就介绍到这里啦!大家可以选择自己喜欢的颜色哦!希望大家最后可以有一个好的装修效果哦!还想要获取更多好玩有趣的资讯,请大家关注本站,多来看一看~

  相关推荐:

  淘宝店铺活动页面怎么装修?

  淘宝店铺导航栏装修教程:如何在导航上加入信用评价?

  淘宝悬浮导航怎么做?淘宝悬浮导航怎么添加?

营销型网站