公告:唯艺客户端火爆上线,模板自动安装,国际安全认证~
马上注册,领取百套精美模板(永久免费) 个人中心 | 下载客户端 | 客户服务 | 登录 | 注册
您所在的位置:淘宝装修教程 > 淘宝装修代码

高级代码装修精美导航

2015-03-25 10:18:16

导航是淘宝店铺装修中的另一大需要卖家们注意的因素。导航作为引导工具,可以让卖家们掌握主动权,引导客户去浏览、购买产品。除了仔细分类外,一个精美制作的导航更能吸引客户按照卖家的引导去走。下面就来学习一下怎样编辑、装修导航吧。


1、首先,登录“卖家中心”,点击“店铺装修”,选择导航处的“编辑”一项。


2、在打开的弹窗里面选择“添加”。


3、添加宝贝分类至导航操作如下:



4、添加自定义页面(基础页面)至导航操作如下:

 


5、添加自定义链接至导航操作:

 


6、设置好的内容可以在此调整位置或删除:

 


7、当上述操作完成后,在前台展示效果如下:

 

此外,导航条的颜色也可以进行自定义更换设置,不过需要一些css的小技巧。



详解淘宝店铺导航CSS代码使用修改技巧


1、首先我们进入到店铺的装修页面,将鼠标放在导航上面会出现“编辑”字样,单击,选择“显示设置”选项卡

 



2、修改导航分类下面的背景色,代码如下:

.skin-box-bd .link{background:#000000;}


 
 
3、如果你想要更加个性,而不想只要简单的纯色块的话,可以自己做图片,然后连接上去,代码如下:
.skin-box-bd .link{background:url(http://img03.taobaocdn.com/imgextra/i3/682206429/T210IOXCdXXXXXXXXX_!!682206429.jpg);}


将“图片连接”换成你的图片的连接就可以了,一般都是自己做好然后上传到淘宝图片空间,然后链接就可以了!在图片空间点击对应图片下方的“链接”按钮可以直接复制图片链接,替换到代码里就可以了!

 

 


 
4、导航背景色代码(除去“所有分类”)如下:
.menu-list .link{background:#000000;}

 


5、导航栏文字(除去“所有分类”)如下:
.menu-list .menu .title{color:#颜色代码;font-size:字号px;}

 


6、“所有分类”的背景色代码如下:
.all-cats .link{background:#000000;}

 


7、“所有分类”的文字代码如下:
.all-cats .link .title{color:#颜色代码;font-size:字号px;}

 


8、二级分类文字代码如下:
.popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}

 



 
9、二级分类背景代码如下:
.popup-content{background:#000000;}

 


10、三级分类文字代码(除去“所有宝贝”分类)如下

popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}




11、一级导航分类(除去“所有宝贝”分类)分隔线颜色代码如下:
.menu-list .menu{border-color:#FFFFFF;}

 


12、鼠标滑过一级分类导航文字变换背景色代码如下:

.menu-list .menu-hover .link{background:#000000;}



13鼠标滑过一级分类导航文字变换颜色代码如下:
.menu-list .menu-hover .link .title{color:#FFFFFF;}

 


注意事项

注意颜色代码的提取,可以用PS等工具选择你喜欢的颜色

制作图片链接时,注意图片的大小



      本文出自唯艺网店装修平台(www.weiyi5.cc),转载请注明出处!

0

相关教程

懒人专区:淘宝模板-免费安装查看更多>

  • 大牌简约 大气背景 珠宝配饰网店模板

    大牌简约 大气背景 珠宝配饰网店模板

    人气:38768
  • 时尚美容美妆馆

    时尚美容美妆馆

    人气:0
  • 森林情调-深绿色 食品保健 家居 玉器 茶叶 户外运动 类模板

    森林情调-深绿色 食品保健 家居 玉器 茶叶 户外运动 类模板

    人气:1
  • 香水珠宝 高贵雅致 化妆健美淘宝模板

    香水珠宝 高贵雅致 化妆健美淘宝模板

    人气:38793
  • 游戏充值 瀑布流 虚拟充值网店模板

    游戏充值 瀑布流 虚拟充值网店模板

    人气:39788
  • 复古欧美 胶片暗青 创意灯饰淘宝模板

    复古欧美 胶片暗青 创意灯饰淘宝模板

    人气:1
  • 中国风 佛缘手珠 饰品珠宝淘宝模板

    中国风 佛缘手珠 饰品珠宝淘宝模板

    人气:30549
  • 双十二 促销大红 现代灯艺淘宝模板

    双十二 促销大红 现代灯艺淘宝模板

    人气:0