淘宝店铺导航栏CSS样式怎么做,淘宝导航条装修教程

来源:刚哥哥免费淘宝店铺装修   发布时间:2017-06-25 17:36
在淘宝店铺装修里,导航栏CSS样式的装修是比较重要的一部分,关系着淘宝店铺装修的页头和主体衔接效果,处理不好的话,严重影响淘宝店铺整体装修风格。今天刚哥哥为大家讲一下淘宝店铺导航栏CSS样式怎么做,淘宝导航条装修教程。

一、导航栏CSS样式制作界面介绍

1、打开我们的免费淘宝店铺装修导航栏CSS样式代码制作页面  点击这里

页面上面部分是淘宝店铺导航栏预览区,下面则是导航栏CSS样式编辑区。

页面上面部分是淘宝店铺导航栏预览区,下面则是导航栏CSS样式编辑区。

页面右侧位置,有个“获取CSS代码”按钮,和装修操作“说明”按钮。

2、来到淘宝店铺装修导航CSS样式代码的编辑区,包括“导航”、“所有分类”、“当前页”、“一级下拉菜单”、“二级下拉菜单”、“其他”、“环境设置”,七大栏目选择。

来到淘宝店铺装修导航CSS样式代码的编辑区,包括“导航”、“所有分类”、“当前页”、“一级下拉菜单”、“二级下拉菜单”、“其他”、“环境设置”,七大栏目选择

二、导航栏CSS样式制作流程

1、导航栏CSS样式设置

预览:导航样式是选择设置后,预览区会自动发生变化,涉及到“经过”的效果,是指鼠标放到该元素上产生的效果,需要把鼠标放设置的元素上查看设置效果。

颜色:点击颜色选择器,在颜色选择界面,选择你喜欢的颜色,或者设置指定的颜色(在#位置,填写颜色编号,可以指定需要的颜色,这个需要你自己提前使用PS或者其他取色软件获得需要的颜色编号)。如果选择了马赛克,意思是不设置,没有任何颜色。

淘宝店铺装修导航栏CSS样式编辑颜色设置

图片:部分设置框里,是设置图片。首先,进入你的淘宝店铺图片空间,上传准备好的背景素材图片,上传完成后,复制图片地址,在图片设置框里粘贴(一定是淘宝图片空间的图片,否则不能在淘宝店铺安装导航CSS代码)。

免费淘宝店铺装修导航栏CSS样式编辑图片设置

注意,部分样式设置里,一个位置有颜色设置,同样有图片设置,我们任取一种,必须设置一种。

字体:字体大小、字体名称、字体样式,根据我们提供的选项进行选择即可。

其他:由于设置的内容太多,我们就不详细讲解了。很多情况下,可以默认不用设置,除非有特别需要,根据提示操作即可。

2、导航栏CSS样式生成

预览满意以后,在右侧区域点击“获取CSS代码”按钮,此时,页面会出现“刚哥哥提示”,这个时候就已经生成了淘宝店铺装修的导航栏CSS样式。在代码框里,根据提示,复制代码,如果不会快捷键,可以在代码框里右键,全选后再操作复制。

导航栏CSS样式生成

导航栏CSS样式生成

3、导航栏CSS样式代码安装

打开淘宝店铺装修首页,编辑你的导航栏。编辑界面中,点击“显示设置”,下面就是店铺导航CSS样式代码粘贴的位置,在框里,使用快捷键粘贴,或者使用鼠标右键。

免费淘宝店铺装修导航栏CSS样式代码安装

免费淘宝店铺装修导航栏CSS样式代码安装

免费淘宝店铺装修导航栏CSS样式代码安装

免费淘宝店铺装修导航栏CSS样式代码安装

粘贴导航CSS样式代码以后,直接点击左下角的“确定”按钮。这样,你设计好的导航CSS样式代码就安装到店铺了。要让别人看到,最后在页面右上角,点击“发布站点”即可。



三、导航栏CSS样式制作常见问题

1、设计的导航样式,在店铺安装后查看的效果,和在线制作里预览的不一样,有色块出现。

这个情况,一般是“导航”——“整体背景色”或者“整体背景图片”都没有设置,重新设置一下这里。

2、文字错位,和预览不一样,使用了淘宝店铺包月模板

因为我们的淘宝店铺装修导航栏CSS样式代码,属于自定义代码,优先级没有淘宝包月模板的高,如果使用了淘宝包月模板,包月模板的导航样式就会和我们的导航样式代码冲突,最终再怎么设置,都不能达到制作页面预览的效果。我们建议使用了淘宝包月模板的卖家朋友,就不要使用我们的导航栏CSS样式代码制作工具。

3、没有订购淘宝的CSS样式服务,也可以使用导航CSS代码吗?

淘宝导航栏的CSS样式,是淘宝开放给所有卖家使用的基本功能,我们的导航栏CSS样式制作工具也只针对导航栏的样式设置。淘宝装修后台的CSS服务,是更高权限,更高级的CSS自定义方式,不仅仅涉及到导航栏,还包括店铺很多的样式控制,只使用我们的导航栏CSS样的话根本不需要订购这个。

没有订购淘宝的CSS样式服务,也可以使用导航CSS代码吗

4、天猫店铺可以使用吗

不推荐天猫店铺使用我们的导航CSS样式编辑工具,因为也会涉及到兼容问题,天猫店铺在使用我们的导航栏CSS样式代码会出现一些不可知的问题,暂时没法解决。

5、我的店铺是基础版旺铺,可以使用导航栏CSS样式代码编辑工具吗?

基础版旺铺,淘宝也开放了导航显示设置功能,当然可以使用。

以上就是刚哥哥为大家介绍的淘宝店铺导航栏CSS样式怎么做,淘宝导航条装修教程。

免费淘宝店铺装修导航栏CSS样式代码制作页面  点击这里


更多
刚哥哥网店装修联盟,免费提供淘宝店铺装修教程、淘宝店铺装修图片、淘宝店铺装修代码、淘宝店铺装修素材、淘宝店铺装修模板,让你的网店装修事半功倍。
本站部分内容来源于网络或网友上传,如有侵犯您的权益,请告诉我们,立即删除处理!
Copyright © 2011-2017 刚哥哥网店装修联盟 All rights reserved.
黔ICP备15006393号-1