天要跟大家分享的是

店铺导航条CSS样式

﹀

﹀

﹀

1

店铺导航条

相当于店铺里面的菜单，通过它跳转到其他页面

就是这个东西 ↓↓↓

正常情况下，它应该是这个样子的 ↓↓↓

（有一点丑丑的）

2

须知

导航开放了css装修功能，可以用css代码，装修出超炫的效果

它并不是只有那个蓝色的版本。。。

表演开始

修改导航条的背景颜色，代码 ↓↓↓

.skin-box-bd .link{background:#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{background:#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{border-color:#000000;}

再加一条代码：

.all-cats .link{border-color:#000000;}

字稍微大一点就放不下。。。。。

所以，辣么宽宽宽的间距代码 ↓↓↓

.menu-list .menu{background:#颜色;margin:0;padding:0px 增加的宽度px;}

……有变化吗？？？ 字真的太小了，字大大大代码 ↓↓↓

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

但是，为什么这个所有分类总是要搞特殊！！！

解决它的代码：

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

【须知：字号最好不要超过20px，否则 ↓↓↓ 】

完成了……但是这个字就是有点单调，就没有鼠标滑过变色之类的特效来调戏一下它这个按钮？？？

不知道为什么不考虑它作为按钮的感受……

管他呢 ……

代码接好 ↓↓↓

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

（看吧，跑出来的“类”已经消失了……）

动图了解一下：

诶，这个背景变了，这个字……能不能也变一变呢……

鼠标滑过字体变色代码 ↓↓↓

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

以上，导航条一级菜单修改完毕

这个意思就是

二三级菜单没改

就是这个↓↓↓

那么这个要怎么改呢？

请继续看表演 ↓↓↓

二级菜单1字号及颜色 ↓↓↓

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

2下拉菜单背景颜色：

.popup-content{background:#000000;}

3鼠标滑过二级菜单，变换背景色：

.popup-content .cats-tree .cat-hd-hover{background:#000000;}

阿偶，我忘记三级菜单的感受了……

看来字体也要变一变

4鼠标滑过二级菜单，变换字体颜色：

.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}

5二级菜单增加间距

有人就说了，下拉菜单跟那个标题凑太近了，不好看，那么我们应该打死他满足他的要求，代码 ↓↓↓

.popup-content .cats-tree{margin:0 0 50px 0;}

三级菜单1字号及颜色

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

.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;}

（两条都请务必试一下，可能是因为操作过于频繁，我的电脑说如果文末不给小心心它就不给看成品，不清楚是不是电脑卡了的缘故）

（然而预览它没给面子，是不是你没有在文末点小心心？！！！）

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;}

以上，真的就是全部了

看久了辣眼睛

排版有些混乱，将就看啊

【再强调一次：代码需要整条复制，全部都是英文状态编辑，不能用中文状态】

乖

我是美工小白

各位晚安

(*＾3＾)/～☆

什么要写这篇文章呢，起因是偶然间看到一个论坛里面，有人喷我，说我免费分享的一些特效代码没用，说我是因为购买了CSS权限

看完以后，老湿我是十分之震精。我店铺连专业版都不舍得买，用的是基础版的店铺。怎么会花钱去买2400一年的CSS权限呢，作为一名代码老司机，在网上还需要花钱，这是对老司机最大侮辱啊。言归正传，那么如何判断一个店铺是否购买了CSS权限呢。

准备从下面几个方面好好聊聊

【目录】：

1. 如何判断店铺是否购买了CSS权限

2. 没有购买CSS权限，为什么有些店铺也有特效

3. 怎么分辨是不是购买模板自带的特效

4. 是否有必要购买CSS权限

5. 店铺是否需要做特效

6. 代码有什么用

米色老湿暂时只能想到这些了，如果有其他问题，可以去我的代码群交流。

一：如何判断店铺是否购买了CSS权限

看上图，可能这里上传时候 自动把图片压缩了，看的不清楚，没关系，老湿是很人性化的，很体贴的，很善解人意的，所以我吧图上红框的东西写出来【#page #content】

就是这个东西，如果你去一个店铺，发现有特效，你就鼠标在有特效的地方，右键-审查元素。然后在右边CSS区域看看，如果是类似于

#page #content xxxx {样式}

那百分比是购买了的，反之就没有。

那有小伙伴要问了，那没有购买的 是什么德行？

#page #content .tshop-pbsm-shop-nav-ch xxxx {样式}

看到区别没有，多了点东西。

二：没有购买CSS权限，为什么有些店铺也有特效

有小伙伴可能有上面的疑惑，为什么有些店铺没有购买也能做特效，比如 有个叫米色的屌丝店铺就有

先说说特效怎么实现的，特效类似于动画，动画都知道，有对比才会有动画，那特效也是有经过前和经过后的对比，才会有特效。

我们写特效，其实就是用到了，鼠标经过的状态。:hover

所以要实现特效，无非是想各种办法让需要特效的地方产生这种变化。

1. 有人直接调用官方带hover的样式实现

2. 有人直接在页面写入CSS样式实现（模块移植，写入CSS等）

3. 有人利用WIDGET组件模拟的特效。

等等方法很多，但无非就是产生这个过程就可以

三：怎么分辨是不是购买模板自带的特效

一般情况下，判断方法，有下面几种

1. 先看看它店铺最先是不是买了模板（拉到店铺最下面看）

2. 在有特效的地方右键审查元素，看看特效所在的模块的名字，是不是其他的，如果不是【自定义内容区】基本上可以判断是模板自带模块的效果（如是移植的模块除外）

所以综上所述也很简单，店铺里面只有自定义内容区我们能写代码，如果特效不是写在自定义内容区，那基本上就是利用模块或者购买的模板自带的特效了

四：是否有必要购买CSS权限

米色还是那句话，如果你们公司不差钱，而且理念是 能用钱解决的问题 一般不动手。那么需要页面做特效，那就购买，方便快捷。

如果你们公司不太注重页面特效，只是偶尔需要做点效果，那没必要购买。

其实CSS权限，权限也不是很大（不能用ID选择器，不能实现动画等等）至于是不是不能写悬浮，由于没有购买过，不清楚。

所以是否购买，根据公司情况来吧。

五：店铺是否需要做特效

1. 经常有人有这样的想法，我店铺没有特效 不也是一样吗？

2. 特效做多了会卡？

3. 现在手机端那么普及，电脑端没人看了，要特效干什么？

等等会有很多问题

1. 关于这个问题，我一直态度呢，任何技术都没有好坏，只是看是否适合公司情况，特效是能让设计更具观赏性，特效能让产品的视觉展示更好看。所以技术没好坏，只看是不是合适自己。

2. 现在互联网发展比较快，早期的互联网 只需要放简单图片就好，连设计都不需要，为什么现在却需要设计精美了呢？因为社会的发展，吃瓜群众的审美会疲劳，想看到不一样的东西，所以现在代码特效，3D效果表现，影视动画等那么受欢迎呢，原因就在这里

3. 不知道有没有人思考过，同样是卖产品，为什么商城里面的店铺 非要装修的很高大上，而街边门店大都不注重装修呢？因为品牌定位不一样，层次不一样，受众也不一样。

4. 看的东西不一样，商城为什么要花那么多钱装修？在我们普通人眼里 可能觉得没必要，或者换个例子，有钱人装修房子，花几十万买个柜子啥的，我们觉得不可思议，几百块的也能用吗，没必要买，为什么我们会这样想，因为我们看的角度不一样，看的东西也不一样，所以店铺需要做特效吗？在我们一般人眼里觉得没必要，我随便设计下，做个热点静态页面就行了，还花那个钱做特效。不知道发现没有一般大店铺不仅购买CSS权限，还会购买模板，但是奇怪就在于买了模板一般不用，都是自己编写代码特效。可能会有疑问，为什么浪费这个钱？因为大公司要面子，需要这些东西体现公司实力，想一下 如果你去看韩都衣舍店铺，就是简单的热点做的装修，人内心第一想法是公司实力不怎么样，反之进去看到页面很精致很炫，觉得公司有实力。所以是不是可以总结下，一般大公司都会需要做页面特效，小店铺就会觉得无所谓。以后随着互联网发展，越来越多公司都会做网页特效。如果只是想做个一般的美工，在小公司上班，那么代码无所谓了；如果你以后想跻身到大企业上班，那么代码就很重要了，为什么因为互联网里什么都需要代码，现在大部分人不懂代码，而你会 通用的设计水平，去应聘你觉得大公司会有限招聘谁？（当然了，如果你设计水准特别高，大神级别，依靠设计就能拿到高薪，那可以不在乎代码）

上面文字比较多，建议找好板凳，买好瓜子花生 坐下来慢慢看

最后，关于这个问题，其实已经不是特效有没有必要了，而是一个公司实力和营销是不是需要了。

六：代码有什么用

像上面说的，现在就是互联网的时代，很多东西都网络化了，一个企业也是，想要多赚钱，就必须要多渠道的开通网络销售平台，而这些平台都需要依靠代码。

2016年9月我去安徽某空调企业总部做内部员工代码系统培训，在和公司总裁一起吃饭的时候，他就说过，2017年公司需要更多拓展网络渠道，而公司的设计师不懂代码，跟不上公司的发展计划，所以急需提升代码水平。【这里由于未经过公司许可，不方便透露公司名字】

我做了差不多5年的代码培训，学生也有很多了，我以前会问他们为什么学习代码，有人说工作需要，有人说想学完了拿高点的工资等等，很多原因，不管什么原因都预示着一个信息，现在的企业慢慢的都需要会代码的人才来满足公司的发展需求。

代码仅仅只能用来装修店铺做特效吗？答案是否定的，学会代码可以做很多事情

1. 自己兼职做代码特效，现在设计业务价格白菜价 很难报高价，而且需要反复修改，吃亏不讨好，相反代码价格是不透明的，代码业务报价普遍很高。

2. 提高自身竞争力。通用去应聘一个岗位，都会设计，但是你会代码，公司肯定优先招聘你，而且工资也会高一些

3. 运用在电商平台，各大电商平台制作特效 都需要依靠代码，甚至像京东店铺 不仅可以写特效，还可以上架自己编写店铺模板。

4. 提高安全意识，现在网络安全很严重，一不小心就中标，很多人不懂

5. 制作自己的个人网站。现在是个性化时代，有自己的个人网站 会显得专业很多

6. 方便生活。比如我自己没事也编写了很多在线生成工具。也做了一个免费看VIP视频的工具，前段时间还自己编程，编写了一个程序，可以远程操控自己的微信和获取微信信息，把自己的微信做一个自动回复功能等等。代码可以做很多事情。

7. 工作需要。通用的装修店铺的工作，会代码可能半天搞定，不会代码 折腾一两天最后还是要问别人怎么做，无形中增加了工作时间。我们可以将一些效果做成模块，以后装修店铺，直接把模块放入店铺，随意调整模块位置，这样也能增加工作效率

8. 店铺运营。不管怎么说电商运营都是基于互联网平台的，那运营思路或多或少也需要一点代码的思维去分析。比如店铺宝贝优化，其实跟网站SEO优化类似。
   

代码的作用太多了，这里篇幅有限就不说太多了

写了好多字，小编脑细胞又损失了几百万，大家关注下哦，关注小编不迷路，小编带你上高速 0 - 0