淘宝旺铺装修导航条左侧下拉菜单如何设置css代码

第一步,进入店铺装修点编辑:第二步,点显示设置:第三步,将显示代码放进去,这个是我们团队的代码:第四,依您的背景颜色和文本变粗,代码如下:.all-cats .link{background:none repeat scroll 0 0 #FF0000;}.skin-box-bd .all-cats .title{font-size:12px;font-weight:bold;color:#000000...
淘宝旺铺装修导航条左侧下拉菜单如何设置css代码
楼主您好,我调试过,你也试试。你懂CSS,我还是按照步骤一步一步来。以便不懂CSS也可以学习下。
第一步,进入店铺装修点编辑:

第二步,点显示设置:

第三步,将显示代码放进去,这个是我们团队的代码:

第四,依您的背景颜色和文本变粗,代码如下:
.all-cats .link{background:none repeat scroll 0 0 #FF0000;}.skin-box-bd .all-cats .title{font-size:12px;font-weight:bold;color:#000000;}
特别说明一下:.all-cats .link{background:none repeat scroll 0 0 #FF0000;}.这段代码是控制“所有分类”的背景,我设置的是红色,颜色代码为#FF0000;
skin-box-bd .all-cats .title{font-size:12px;font-weight:bold;color:#000000;}这段代码是控制字体顺序依次是“所有分类”文字的大小,是否加粗,文字的颜色。
您试试。
第五,拓展一下所有分类类目下的子类目如何实现控制。

您可以在这里再进一步深入研究一下。

最后,给个建议,就是利用谷歌浏览器,鼠标点右键,有一项是“审查元素”,可以查看代码,慢慢调试。
2013-07-06
首先进入到店铺的装修页面,将鼠标放在导航上面会出现“编辑”字样,单击,选择“显示设置”选项卡

第一部分、静态背景颜色
1、首页/店铺动态/其它导航类目的背景色,这里设为红色
.skin-box-bd .menu-list .link{background:red;}
2、所有分类的背景色(最左边的),一样设为红色
.all-cats .link{background:red;}
到这里,发觉右边的颜色还没有变呢,好的,接着下一步
3、导航条整个分类段背景色,还是要设为红色,整体布局好看些
.skin-box-bd .menu-list{background:red;}
注意观察,最右边还有一丝地方没有变
4、导航条背景色(是最底层了吧),修补导航右侧缺口,再设为红色
.skin-box-bd{background:red;}
小结:有点成功感了!换换其它颜色试试看吧
背景色最好搭配页头背景图,才能整体大气美观

第二部分、分隔线、静态文字的颜色
5、首页等分类的右边的分隔线颜色,设为白色
.menu-list .menu{border-color:white;}
6、所有分类的右边的分隔线颜色,设为白色
.all-cats .link{border-color:white;}
7、首页/店铺动态/其它导航类目的文字颜色
.menu-list .menu .title{color:yellow;}
8、所有分类的文字颜色(最左边那个),
.all-cats .link .title{color:yellow;}
小结:其实原来默认文字的颜色也挺好的

第三部分、分类下的颜色
9、二级分类的背景色,设为灰色
.popup-content{background:gray;}
10、三级分类的背景色,我设为深灰色
.popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
11、二级分类的文字颜色,设为黄色
.popup-content .cat-name{color:yellow;}
12、三级分类的文字颜色。(如果后面要鼠标滑过变色<21.22>,这句要写)
.popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;}
小结:上面这句不写,和二级分类颜色是一样的

第四部分、鼠标滑过变背景色
13、鼠标滑过首页/店铺动态/其它导航类目变换背景色,这设为蓝色
.menu-list .menu-hover .link{background:blue;}
14、鼠标滑过所有分类(最左边那个)变换背景色,这同样设为蓝色
.all-cats-hover .link{background:blue;}
15、鼠标滑过所有分类下的二级分类变换背景色,这设为蓝色
.popup-content .cats-tree .cat-hd-hover{background:blue;}
16、鼠标滑过所有分类下的三级分类变换背景色,这设为深蓝色
.popup-content .cats-tree .snd-cat-hd-hover{background:#160595;}
17、鼠标滑过导航类目下的宝贝分类变换背景色,这设为蓝色
.menu-popup-cats .sub-cat-hover{background:blue;}
小结:这个所有分类,与首页后面的,是要分开设计的

第五部分、鼠标滑过变文字颜色
18、鼠标滑过首页/店铺动态/其它导航类目变换文字颜色,这设为红色
.menu-list .menu-hover .title{color:red;}
19、鼠标滑过所有分类(最左边那个)变换文字颜色,这同样设为红色
.all-cats-hover .link .title{color:red;}
20、鼠标滑过导航类目下的宝贝分类变换文字颜色,这设为红色
.menu-popup-cats .sub-cat-hover .cat-name{color:red;}
21、鼠标滑过所有分类下的二级分类变换文字颜色,这设为红色
.popup-content .cat-hd-hover .cat-name{color:red;}
22、鼠标滑过所有分类下的三级分类变换文字颜色,这设为红色
.popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:red;}
小结:这部分还是默认白色的好看

第六部分、导航项目激活状态
23、激活项目的文字背景色(难看,所以none)、文字颜色(选白色)
.skin-box-bd .menu-list .menu-selected .link .title{background:none;color:white;}
24、激活项目的项目背景色(项目框),选紫色
.skin-box-bd .menu-list .menu-selected .link{background:purple;}2015-12-25


把您要的颜色说下,我可以给您代码
2013-07-06
需要代码,我有,但是我是买的2013-07-06
mengvlog 阅读 9 次 更新于 2025-07-20 14:08:33 我来答关注问题0
  • 第一步,进入店铺装修点编辑:第二步,点显示设置:第三步,将显示代码放进去,这个是我们团队的代码:第四,依您的背景颜色和文本变粗,代码如下:.all-cats .link{background:none repeat scroll 0 0 #FF0000;}.skin-box-bd .all-cats .title{font-size:12px;font-weight:bold;color:#000000...

  •  宜美生活妙招 淘宝店铺怎样添加左侧悬浮导航

    一、拖动悬浮导航模块 登录淘宝:首先,需要登录淘宝卖家中心。进入装修界面:在卖家中心,找到并点击“店铺装修”进入装修界面。拖动悬浮导航模块:在装修界面的左侧模块栏中,找到“悬浮导航”模块,按住该模块并拖动到预览店铺界面的左侧位置。二、设置位置 指向模块并点击编辑:拉好悬浮导航模块后,指向该...

  •  宜美生活妙招 淘宝店铺怎样添加左侧悬浮导航

    首先,登录你的淘宝卖家账号。进入店铺的装修界面,在左侧的模块区域中查找“悬浮导航”模块。添加悬浮导航模块:找到“悬浮导航”模块后,按住该模块并拉动到预览店铺界面的左侧位置。设置模块位置:拉好模块后,指向该模块并点击顶部出现的“编辑”按钮。在弹出的设置窗口中,填入“距离店铺页头的距离”和“...

  •  阿暄生活 淘宝店铺悬浮导航菜单制作

    一、准备工作 登录淘宝后台:首先,你需要登录到你的淘宝卖家账号,并进入店铺的装修后台。二、添加悬浮导航模块 进入装修页面:在淘宝卖家中心,找到并点击“店铺装修”选项,进入店铺的装修页面。选择悬浮导航模块:在装修页面的左侧模块列表中,找到并点击“悬浮导航”模块。如果你的店铺使用的是旺铺智能版...

  •  猪八戒网 淘宝店铺怎么设置导航菜单?

    1,在淘宝首页,点击登录,进入卖家账号,在首页的上方点击“卖家中心”进入淘宝卖家中心主页。2,在主页的左栏目中找到常用操作的“店铺装修”,点击进入装修版面。3,在“模块”装修页面中,点击“页面编辑”,鼠标放在导航页位置按右键,会出来“编辑”二字,继续点击进入。4,这时能看到导航设置,在...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部