导航条是网页设计中不可缺少的部分,是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。那么怎样设置呢?
材料/工具
电脑
方法
进入卖家中心
点击“店铺装修”,即可进入装修界面。
点击“编辑”
进入编辑界面后,会出现两个选项,“导航设置”和“显示设置”,“导航设置”就是如下图所示添加或删除导航条的内容,或者将某一项上移或下移。在此重点讲解一下“显示设置”
导航条的“显示设置”是通过一些固定的代码来实现设置的。在此设置一个导航条的导航条背景色为绿色,将代码改为00FF00,即可
附:颜色代码
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
22 深棕 #5C4033 23 深绿 #2F4F2F 24 深铜绿色 #4A766E
25 深橄榄绿 #4F4F2F 26 深兰花色 #9932CD 27 深紫色 #871F78
28 深石板蓝 #6B238E 29 深铅灰色 #2F4F4F 30 深棕褐色 #97694F
32 深绿松石色 #7093DB 33 暗木色 #855E42 34 淡灰色 #545454
35 土灰玫瑰红色#856363 36 长石色 #D19275 37 火砖色 #8E2323
38 森林绿 #238E23 39 金色 #CD7F32 40 鲜黄色 #DBDB70
41 灰色 #C0C0C0 42 铜绿色 #527F76 43 青黄色 #93DB70
44 猎人绿 #215E21 45 印度红 #4E2F2F 46 土黄色 #9F9F5F
47 浅蓝色 #C0D9D9 48 浅灰色 #A8A8A8 49 浅钢蓝色 #8F8FBD
59 浅木色 #E9C2A6 60 石灰绿色 #32CD32 61 桔黄色 #E47833
62 褐红色 #8E236B 63 中海蓝色 #32CD99 64 中蓝色 #3232CD
65 中森林绿 #6B8E23 66 中鲜黄色 #EAEAAE 67 中兰花色 #9370DB
68 中海绿色 #426F42 69 中石板蓝色 #7F00FF 70 中春绿色 #7FFF00
71 中绿松石色 #70DBDB 72 中紫红色 #DB7093 73 中木色 #A68064
74 深藏青色 #2F2F4F 75 海军蓝 #23238E 76 霓虹篮 #4D4DFF
77 霓虹粉红 #FF6EC7 78 新深藏青色 #00009C 79 新棕褐色 #EBC79E
80 暗金黄色 #CFB53B 81 橙色 #FF7F00 82 橙红色 #FF2400
83 淡紫色 #DB70DB 84 浅绿色 #8FBC8F 85 粉红色 #BC8F8F
86 李子色 #EAADEA 87 石英色 #D9D9F3 88 艳蓝色 #5959AB
89 鲑鱼色 #6F4242 90 猩红色 #BC1717 91 海绿色 #238E68
92 半甜巧克力色#6B4226 93 赭色 #8E6B23 94 银色 #E6E8FA
95 天蓝 #3299CC 96 石板蓝 #007FFF 97 艳粉红色 #FF1CAE
98 春绿色 #00FF7F 99 钢蓝色 #236B8E 100 亮天蓝色 #38B0DE
101 棕褐色 #DB9370 102 紫红色 #D8BFD8 103 石板蓝色 #ADEAEA
104 浓深棕色 #5C4033 105 淡浅灰色 #CDCDCD 106 紫罗兰色 #4F2F4F
107 紫罗兰红色 #CC3299 108 麦黄色 #D8D8BF 109 黄绿色 #99CC
米色带你突破淘宝/天猫店铺导航全屏
曾几何时,你是否有过这样的烦恼;曾几何时,是否有过那样的忧桑。
辛辛苦苦设计的店铺页面效果,然后满怀欣喜去装修到店铺。却发现导航条只能做990或者950宽度,不能全屏,并且超过950还能点击。
那怎么才能,突破950或者990限制,超过外范围也能实现点击呢?就想下面这样
一:原因分析跟店铺自定义模块不能全屏的原因是一样的,都是因为限制了宽度,并且添加了溢出隐藏,造成不能全屏。
解决办法也很简单,跟自定义模块全屏原理一样,不过我们是通过相对定位来实现全屏。
二:代码演练方法1:
如果你店铺不是逃避基础版的,那么我们可以直接进入装修后台,页头设置里面,添加页头背景。这个页头背景就是店招和导航后面的背景图。自己去试试就会知道怎么使用,很简单
方法:2:
只需要找到默认导航条,最外层的框架。也就是class名位 skin-box-bd 的DIV标签。然后设置一些CSS样式就会全屏了、
.skin-box-bd { width:950px; padding:0 485px; position:relative; left:-485px;}
将上面代码,复制放进店铺导航--显示设置里面,点击确定。注意预览看不到效果。发布后会看到全屏效果。
有同志会说,如果我想让导航大于950呢,那么这里米色就以1000px宽度为例,写出代码
.skin-box-bd { width:1000px; padding:0 460px; position:relative; left:-460px;}
三:注意事项因为这里只是实现导航全屏效果,所以代码里面只实现了全屏效果。如果还需要实现更复杂的效果,比如我淘宝店的效果 http://cisdesign.taobao.com 所有分类和右侧分类相聚很开,等效果。那就需要有一定的代码基础,自己编写CSS代码实现了。
预览可能会看不到效果,发布后即可看到,全屏导航效果
淘宝允许我们通过CSS代码修改默认导航的效果,所以理论上我们可以在店铺里,实现任何的导航条效果
我不建议用自定义导航代替默认导航,因为自定义导航,详情页里面,没办法显示分类的弹出子分类。如果你们公司无所谓,那么可以自定义导航
大概能想到的就这么多,有上面问题,可以直接留言回复