淘宝导航栏颜色怎么改?教程在此！-开淘网

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

2017-12-24 19:48:11

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

　　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

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