今天想和大家分享的是
店铺导航栏CSS样式
1个
店铺导航栏
相当于商店里的菜单，用它可以跳转到其他页面
是这个吗↓↓↓
正常情况下应该是这样↓↓↓
（有点丑）
2个
笔记
导航开启了css装饰功能，可以用css代码装饰出超炫的效果
它不仅是蓝色版本。 . .
演出开始
首先进入店铺装修页面，点击导航栏右侧的“编辑”按钮
进入编辑页面
修改导航栏背景色，代码↓↓↓\\n
.skin-box-bd.link{背景:#000000;}
【请复制全部代码，可修改部分已加粗，具体色号可自行查找】
代码↓↓↓.skin-box-bd .link{background:url(图片链接);
二、如果想要更有个性，也可以做个图片作为背景
复制图片链接
代码↓↓↓.skin-box-bd .link{background:url(图片链接);
效果图
第三处修改是整个导航栏的颜色（不包括上一点的部分），
代码↓↓↓
.skin-box-bd .menu-list{background:#000000;}
当然也可以换成图片，代码↓↓↓
.skin-box -bd .menu-list{background:url(图片链接);}
这部分刚才没有变色
,颜色变化代码↓↓↓
.skin-box-bd{背景：#000000;}
换图代码↓↓
.skin -box-bd{background:url(图片链接);}
基本完成了，来看看成品：
成品图
（可能是因为教程二删删改太多，备份的有点乱，和别人的不太一样，应该是这样的：
图片来自论坛：
)
[注意：整个部分包括词内外，所以需要两个代码↓↓↓]
文本内：.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}
文本外：.skin-box-bd.menu-list.menu-selected.link{background:#000000;}
看看成品：
完成的产品
这些分割线的颜色都没有改，改代码↓↓↓
.menu-list .menu{边框颜色:#000000;}
还有一个区别
添加另一个代码：
.all-cats .link {边框颜色：#000000;}
有时候觉得分类导航太窄了（别问我为什么一个导航要求那么多）
我放不下稍微大一点的词。 . . . .
所以，宽宽间距代码↓↓↓
.menu-list .menu{背景：#color;margin:0;padding:0px 增加宽度 px;}
我只是把间距调宽了，但我觉得文字太小了，看起来很空
……有什么变化吗？ ？ ？字体真的太小了，代码又大又大↓↓↓
.menu-list .menu .title{color:#color code;font-size:font size px;}
完成的产品
但是为什么所有的类别总是必须是特殊的！ ！ ！
解决它的代码：
.all-cats .link .title{颜色：#color； font-size: 字体大小 px;}
【注意：字号不能超过20px，否则↓↓↓】
用完的部分不会显示，稍后会看到
完了……不过这个词有点单调，没有鼠标悬停变色之类的特效用这个按钮Trick it？ ？ ？
不知道你为什么不考虑它作为按钮的感觉……
不管是什么…
代码连接↓↓↓
.menu-list .menu-hover .link{ 背景：#000000;}
鼠标滑过变色特效
（你看，用完的“班级”不见了……）
我们来看看动画：
咦，这个背景变了，这个角色……是不是也可以变了……
鼠标悬停字体颜色变化代码↓↓↓
.menu-list .menu-hover .link .title{color :#FFFFFF;}
将鼠标悬停在字体上以更改颜色
上图，修改了导航栏的一级菜单
这表示
二三级菜单没变
就是这个↓↓↓
2 级和 3 级菜单
那么如何改变呢？
请继续看节目↓↓↓
二级菜单1字体大小和颜色↓↓↓
.popup-content .cats-tree .fst-cat .cat-name{font-size: 字体大小px;color:#颜色代码;
字体粗细：粗体/粗体/正常；}
2 下拉菜单背景色：
.popup-content{background:#000000;}\\n
3 鼠标滑过二级菜单，改变背景颜色：
.popup-content .cats-tree .cat-hd-hover{background:#000000;}
鼠标滑过二级菜单，改变背景颜色
哎呀，忘记三级菜单的感觉了……
好像字体也会变
4 鼠标悬停在二级菜单上，更改字体颜色：\\n
.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}
将鼠标移到二级菜单上可以更改字体颜色
5 增加二级菜单的间距
有人说下拉菜单离标题太近了，不好看，要杀了他才能满足他的要求，代码↓↓↓
.弹出内容.cats-tree{margin:0 0 50px 0;}
三级菜单 1 字体大小和颜色
.popup-content .cats-tree .snd-pop-inner{字体大小：字体大小px；颜色：#颜色代码；
字体粗细：粗体/粗体/正常；}
.popup-content .cats-tree .snd-pop-inner{字体大小：字体大小 px;颜色：#颜色；}
（请务必两个都试一下，可能是操作太频繁了，我的电脑说如果不注意文末就不会显示成品，不知道有没有这是一张电脑卡）
（不过，预览一下不给面子，文末没注意吗？！！！）
2 改变背景颜色
.popup-content .cats-tree .snd-pop-inner{background:#000000;}
更改背景颜色
颜色已经自暴自弃了……没想到它还有反应
3 鼠标悬停，改变背景颜色
.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}
鼠标悬停，改变背景颜色
4鼠标悬停，改变字体颜色
.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}
鼠标悬停，更改字体颜色
以上，是一级、二级、三级菜单的代码
此外
补充：
下拉菜单的小图标
所有类别的小图标
.all-cats .link .popup-icon {background:url(图片链接);}
二级菜单小图片图标（需要三级菜单）
.popup-content .cats-tree .fst-cat-icon{background:url(图片链接);}
三级菜单前加白色小图标
尽量不要太大，不然就GG了。。。
.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}
以上就是以上所有
我已经看了很久
排版有点混乱，我就看看吧