进入正文之前有必要说明下：艺灵分享的教程主要以装修经验为主，是为了解决看官在实际装修中遇到的代码问题和突破思维瓶颈。至于店铺收益这个问题不在范围之内，谢谢理解。

今天这篇文章主要讲的是：装修阿里巴巴店铺时，如何绕过过滤机制，成功让css显示出来。

如果按正常流程来讲，这篇文章需要到一个月后才能发布。但由于某些原因，所以提前发布下，也希望看官在看完文章后能学到点什么。

一、阿里巴巴的店铺装修已经不像以前那么自由了

相对于淘宝和天猫装修而言，折腾阿里巴巴店铺的看官非常少。

早在16年6月的时候，艺灵曾写过一篇有关阿里巴巴装修的教程文章--《帮您节省千元的阿里巴巴1688店铺装修教程》

文章主要介绍了：阿里巴巴的装修方法以及可以写自定义css的事情。

就在不久前，突然有不少小伙伴向艺灵反应代码失效的问题。经亲自验证后才发现：原来阿里巴巴店铺也开始走淘宝的老路了，什么绝对定位属性、自定义css啥的都已经被列到了装修黑名单中！

二、时效性

虽然现在的阿里巴巴在装修代码上已经做了过滤检测，但我们还是有办法绕过过滤的。

如果看官之前一直有看艺灵写的文章的话就会发现一个有趣的现象，那就是：“每次公布的破解方法很快就失效了......”这个确实有点尴尬，虽然本文是写阿里巴巴的方法，相信在很短的时间内，本文提供的方法也会被修复。所以呢，看官需要认真看下面的每一个字，因为，因为，内有乾坤！

三、破解之道

对于我们这群码农来说，谁还不会个html转义字符和Unicode编码啊！想想之前玩淘宝的时候，很多大神都用这两把刷子得到了想要的结果！

咱们言归正传。对于html转义字符，看官只需要记住以下两个即可！<和>。

<对应的是html代码中的<，也就是左尖括号；

>对应的是html代码中的>，也就是右尖括号。

3.1、html转义字符

还是来举一个例子吧！代码如下：

<div class="box" style="position:relative;color:#f00">这是一个div标签，文字是红色。</div>

下面我们将上面的代码保存到阿里巴巴店铺中来验证下吧。登录步骤就省略了，进入店铺后，鼠标放到任意一个自定义内容区的右上角，然后点击编辑，接着就直接把代码粘贴进来，然后点击确定即可。完整流程图：

在自定义内容区中直接粘贴代码

此时点击预览可以看到效果了，效果如图：

预览时代码没有过滤，效果显示正常

3.2、为什么不点击源码

如果看官习惯了其他平台的装修流程的话，肯定会问一个问题：“为什么不点击源码，然后在源码模式下粘贴代码”？

这么说吧，其实最早这个方法是可行了。就在艺灵写完本文开头提到的那篇文章后不久，就变成现在就这样了。在源代码模式下粘贴是没有多大作用的。

我不信！

不信？上图：

现在是源代码模式下粘贴代码

看官注意看我粘贴进去的代码。

粘贴后点击确定，然后在预览页面看下效果。效果如图：

预览时看似正常

哟，有效果，代码没有屏蔽，鉴定完毕！

看官确定？要不来看看源码？上图：

看源码时才发现部分css属性已被过滤掉了

怎么样，有没有发现相对定位的属性被过滤掉了？？

3.3、原来这么简单！

好吧！那我现在知道了：就是在编辑模式下将左右尖括号转义下，然后再粘贴代码就可以了，原来这么简单！

如果看官有这种想法的话，艺灵要恭喜看官了：你咋不上天呢！有本事你写个css内部样式表！

30秒后

不科学啊，怎么又被过滤了，这什么破原理......如图：

编辑模式下粘贴内联样式表会被直接过滤

怎么样，是不是有点懵？

3.4、html转十进制

其实绕过style样式表的方法有很多，艺灵就再介绍一种，算是抛砖引玉下吧。至于剩下的一些方法，此处不便直说。不要问为什么，因为你知道的太多了！会被......

刚我们将左右尖括号进行了字符转义，下面我们还可以转成十进制。

左尖括号<转义后就是<；

右尖括号>转义后就是>。

好，转义完成后的代码如下：

<style>.box{position:relative;background:#ccc}</style>

还是同样的操作，直接复制上面的代码，然后扔到自定义模块中即可。如图：

将左右尖括号转成十进制即可

怎么样，这回css样式表成功显示了吧！

四、总结

为了安全起见，我们可以用十进制来修改我们的源码。至于上面的演示代码，艺灵已整理好，有兴趣的看官可以直接复制后放到店铺中看下效果。

<div class="box" style="position:relative;color:#f00">这是一个div标签，文字是红色。</div>

<style>.box{position:relative;background:#ccc}</style>

上面的代码最终效果如图：

最终效果是灰色背景的盒子中显示红色字

五、视频

下面艺灵就本文的方法录制了一个小视频，可以看下里面文字总结。由于系统在pc端对视频不友好，所以想看视频的看官用手机访问即可。

章适合具备基础的HTML和CSS知识，对于阿里巴巴店铺装修有兴趣的网友。也是对网络上装修教程或分享不太多的一个补充。

文章的做法和看法是基于阿里巴巴的国内PC店铺装修的前提，其他阿里手机店铺、阿里国际未必适用。本文是适合具备基础的HTML和CSS知识的网友浏览，且对店铺数据管理(图片上传，表单填写的理解)有基础操作经验或认知的人。之所以接触阿里巴巴的店铺装修，主因是有朋友需要这方面的帮助。

对于各大网店的装修真心没涉足过，所以一开始登录装修后台后，各种好奇心各种研究，各种查找店铺的开发者文档之类的东西，结果寥寥无几，而且帮助不大。为了方便以后再次开发及能帮助新接触店铺装修的网友们，所以即使是我这样一个不善码字的人，也觉得有必要将阿里店铺装修这方面的学习研究过程写成一系列的文章。

好的，别的不说了，进入正题吧：

1. 想要学习或研究这方面的开发，大家最好还是要有一个店铺能够进行操作测试

2. 登录后台。进入店铺装修

一般我们看到的都是这两个模式的界面(全屏布局)

这个是页面布局模式（主要是展现各区块的布局，你设置的图片和产品不会在这里呈现）

这个是可视化设计模式（展现各区块的实际用图，产品等，一般情况下只是静态效果）

至于在哪个区方便操作，这个我就不多赘述啦，实际操作的时候，网友们会自行选择。值得一提的是两个区实际上功能都是一样的，最后也有添加版块，在上两图的最后红框已经明显标注了。

添加的版块里面都可以有些什么?

上图可以看到全部可添加的基础版块，后面的模板和高级版块是你购买的模板和阿里提供的两个小高级版块，这里不再叙述了。其中基础版块里面有三四个版块是比较重要和实用的：

a. 全屏大图

这个版块是可以选择一张大图，然后按照全屏的宽度来拉伸图片，并且还可以添加多个热点区域(可点击链接区域)

图为给图片添加热点(可点击链接区域)

b. 全屏轮播

全屏轮播的功能即使添加一个全屏版块，多张广告大图切换的功能。

其中轮播属性还包括了图片高度，间隔时间，效果等设置。

C. 自定义版块(重点重点重点)

自定义模块是开发者使用的一个模块，除了能给你写入你自己的代码，代码能做什么是你自己的编码水平问题了。不过要注意的一点是，这里能加入的代码基本也就只有HTML和CSS，JS代码局限比较大，一般不建议往里面嵌入JS，而且加入的代码模式也是很有讲究才能生效。

自定义模块分为源代码模式和编辑模式。

源代码模式是开发者常用的模式

天要跟大家分享的是

店铺导航条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＾)/～☆