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

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

工具/原料

淘宝店铺

电脑记事本

方法/步骤

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

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

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

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

效果如下

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

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

如果你想要更加个性,而不想只要简单的纯色块的话,可以自己做图片,然后连接上去,代码如下:

.skin-box-bd .link{background:url(;}

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

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

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

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

导航背景色代码(除去“所有分类”)如下:

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

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

导航栏文字(除去“所有分类”)如下:

.menu-list .menu .title{color:#颜色代码;font-size:字号px;}

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

“所有分类”的背景色代码如下:

.all-cats .link{background:#000000;}

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

“所有分类”的文字代码如下:

.all-cats .link .title{color:#颜色代码;font-size:字号px;}

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

二级分类文字代码如下:

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

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

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

二级分类背景代码如下:

.popup-content{background:#000000;}

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

三级分类文字代码(除去“所有宝贝”分类)如下.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}

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

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

一级导航分类(除去“所有宝贝”分类)分隔线颜色代码如下:

.menu-list .menu{border-color:#FFFFFF;}

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

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

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

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

.menu-list .menu-hover .link .title{color:#FFFFFF;}

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

注意事项

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

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

相关文章

  1. 淘宝店铺导航条怎么设置

    工具/原料 淘宝店铺 进入我是卖家-店铺装修-导航条位于图片所示部分,一般位于靠近顶端的位置,鼠标悬浮可显示编辑按钮,点击编辑按钮进入导航条自定义 点击添加可将你的店铺宝贝分类添加至首页导航,相当于为你的宝贝进行分类,在店铺顶端显示宝贝的所属类目并提供点击跳转 点击自定义链接可为你的店铺添加友情链接 ...

  2. 如何设计淘宝旺铺店铺导航

    方法/步骤 如何编辑旺铺2012 的导航呢?进入店铺后台,选择导航处的"编辑": 1.在打开的弹窗里面选择"添加": 2.添加宝贝分类至导航操作如下: 3.添加页面至导航操作如下: 4.添加自定义链接至导航操作如下: 5.设置好的内容可以在此调整位置或删除: ...

  3. 淘宝开店技巧与问答8条

    方法/步骤 技巧1--如何选择店标图片的获材 店标是淘宝网普通店铺的标志.它在淘宝店铺中以两种形态显示:舒态图像和动态图像.店标通常由店铺名称.产品图片.六传文字等组合而成.店标的图片素材通常可以从网站上直接找到.在百度中输人关健字并查找,可以找到很多相关的图片素材.也可以去设计资源网站,找到更多的 ...

  4. 淘宝导航颜色怎么改?

    工具/原料 淘宝旺铺店铺导航栏CSS代码在线生成器 1.进入卖家中心,点击"店铺装修",即可进入装修界面.将鼠标放置导航条位置,即可出现编辑按钮,点击"编辑" 2.进入编辑界面后,会出现两个选项,"导航设置"和"显示设置" ...

  5. 淘宝网店铺基础版CSS代码装修怎么换背景颜色

    开淘宝店的都知道淘宝店铺基础版换不了背景的. 今天我叫他们用一个简单的代码换背景. 专业基础版通用CSS代码装修怎么换背景颜色.让你的淘宝网店铺美丽起来. 方法/步骤 进入你淘宝店的装修页面,鼠标移动到导航上,点击编辑. 如下图↓ 点击显示设置. 如下图↓ 把下面的这段代码复制到编辑框里面点击确定. ...

  6. 旺铺装修系列教程之如何制作店铺页头店招通栏

    新旺铺默认的店招就是通栏的,很多朋友知道如何更换店招,但是如何制作设置成通栏就不会了.今天给大家介绍一下旺铺装修中店铺页头店招通栏的制作. 先看效果图 一.前期准备工作: 首先来认识一下什么叫做店铺页头,店铺页头包含两个部分:店招和导航栏,店铺页头通栏还多了个通栏背景. 1.店铺招牌:新旺铺中默认的 ...

  7. 淘宝装修教程

    淘宝最新最快速简便的免费的装修技巧,即使没有学过代码和美工,也可以装修出一个大气的店铺!具体操作都会在教程里有详细讲解,接下来我们开始吧! 工具/原料 能联网的电脑一台 浏览器 方法/步骤 打开浏览器,搜索淘宝,进入淘宝官网,登录账号后点击右上角的卖家中心. 进入卖家中心页面后,单击页面左下角的店铺 ...

  8. 2016淘宝店铺首页导航条设置步骤与方法

    店铺首页导航条就像是店铺内的"活地图"一样,买家可以根据地图内容快速找到目标商品,大大节约购物时间.因此今日小编就来教大家如何设置清晰的淘宝店铺首页导航条. 工具/原料 电脑 步骤 卖家首先登陆到淘宝卖家中心,在店铺管理中找到店铺装修,然后点击进入店铺装修中.找到[店铺装修],点 ...

  9. 怎样装修淘宝店铺?新手篇

    随着时代的脚步,也越来越多的朋友想开淘宝店,但是问题来了,前期最需要钱的时候,我不想给钱别人帮我装修,但是我又不会装修怎么办?希望我的提供可以帮您解决问题. 工具/原料 电脑一台 联网 方法/步骤 首先打开淘宝网,点击"卖家中心"选项,进入 然后就可以看到最左侧边那里往下,有个店 ...