导航是店铺不可或缺的部分,有条理的将产品分类展示,可以让买家更加快捷找到自己所需要的商品,有一些卖家想要让效果更加好,想要改变导航栏的颜色,所以今天开淘小编为大家准备了教程,赶紧去看看吧!
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
更改导航栏颜色的教程就介绍到这里啦!大家可以选择自己喜欢的颜色哦!希望大家最后可以有一个好的装修效果哦!还想要获取更多好玩有趣的资讯,请大家关注,多来看一看~
相关推荐:
淘宝店铺活动页面怎么装修?
淘宝店铺导航栏装修教程:如何在导航上加入信用评价?
淘宝悬浮导航怎么做?淘宝悬浮导航怎么添加?