摘要：
　　折腾了几个小时的阿里巴巴店铺装修，踩了坑、中了彩蛋。最后艺灵决定写下这篇可以帮你节省上千元装修店铺费用的基础教程。都说现在是人傻钱多的时代，艺灵想弱弱的问下看官：咱们能交个朋友吧，装修下店铺也行呀！......

一、起因

昨天夜晚(2016-06-30)群内一小伙伴@？问我关于阿里巴巴1688店铺装修的问题。由于之前没有1688的店铺，所以趁此机会要了个账号，折腾了一晚加上今天一上午的时间。然后你们懂的，收获满满的，哈哈！

二、收获

收获主要有以下这些：
1、不能新增页面(不知道是权限不够还是怎么回事，反正没找到添加的入口)；
2、网站上的在线生成中大部分软件生成的代码可直接用到阿里巴巴店铺中；
3、写自定义css时有坑点；
4、头部与尾部的模块并不是所有页面都共用的！！！
5、留给用户太高的权限，以至于我们可以改变页面布局、任意增加模块等(艺灵会告诉你，last_modified实际上是一个时间戳吗？)；

对于上面的观点，随着时间的关系，难免会被推翻。但现目前为止，除了第一条外，其它几条艺灵还是比较有把握的哦！如果看官有观点，可留言至评论区中一起探讨。

好了，我们开始今天的主题吧！

三、各平台店铺装修有那么难吗？

其实，只要看官的基本功 div+css 基础扎实了，管他什么京东装修、淘宝装修、天猫装修、蘑菇街装修、一号店装修、阿里巴巴装修等等，全都是一个套路！！！无非是：不同的平台有不同的功能限制以及不同的违规标准。只要在装修中避开这一点，不去触碰那些底线，我们就可以愉快的进行装修。

尽管如此，但仍有很多看官换个平台就懵了......

为此，艺灵觉得有必要再搞个阿里巴巴的装修教程出来，但艺灵相信，仍有大部分看官看官此教程后，继续傻下去。哎，没办法，谁叫中国人傻钱多呢？？？......

下面的教程将以自定义内容区写css为例，图文演示从登录到用两种方法搞定css这一完整过程，需要的看官请仔细看文章。

四、装修阿里巴巴1688店铺时写css的坑点

4.1、操作流程

完整流程：
1、有店铺的先登录1688平台，登录成功后点击导航上面的“我的阿里”；
2、在我的应用中点击“旺铺”即可进入装修页面；
3、此时我们就进入旺铺装修中来了，然后点击导航上面的“页面管理”，选择一个页面作为练手页面，此处展示的是“艺灵测试”页面；
4、点击此页面后面的地“装修页面”；如果想展示在导航上面得勾选后面的小框框；
6、在页面中选择一个“自定义内容区”并点击“设置”，如果没有自定义区，点击右侧的“添加版块”进行添加即可(此处有彩蛋哦~~~)；
7、历经了这么多的步骤，我们终于可以写自定义代码了。按照常规思路，我们肯定会将代码放进“源代码”中；
8、然后点击确定。但是很不幸！这样操作会被过滤掉一部分代码。我想：很多看官在别人那里复制来的代码放自己店铺中没有效果可能跟这个有关。
写到这里，已经有了8个步骤了，对于理解能力差的看官早已懵掉，配图一张：

4.2、代码不被过滤的方法

9、正确的方法是：在编辑模式下粘贴自己的代码；
10、在这个案例中，此时前台虽然可以保留我们写的代码，但并没有发现.ylsj-fixed、#ylsj-fixed被成功调用，为什么？？
再配图一张：

答案：css样式前面被强制添加了换行符<br>，然后浏览器无法解析css。

4.3、写css的两种方法

接着上面的，此处有两种方法可以解决这个问题，我们来一一说明。
方法一：编辑模式下，将代码首尾连起来，中间不要出现空格、换行等。配图：　对于方法一，显然有点麻烦，我们需要去掉大量的换行符及空格，那就来看下方法二吧。
方法二：在源代码模式下，将<>进行转义即可。配图：　

可能有些看官也会觉得方法二比较麻烦，好吧！难道看官忘记了 dreamweaver 中的批量替换功能？？？其它的编辑软件也是有的哦！如果看官实在不想用这两种方法，那么，请自便吧。花钱找人装修也是可以的......

五、编码转换

除了上面提到的，将<转换成<、>转换成>外，我们还可以转换成其它的格式。如果看官有兴趣，可以使用艺灵的在线转换工具进行转换。 点此进入工具

六、最后

肯定有看官在疑惑：哪里节省千元的装修费用了？？？

这个......我们来看一组数据吧。

对淘宝和天猫装修有过了解的看官应该都知道：店铺中常规情况下是无法写css的，因为淘宝已将css单独做成一个名叫旺铺css的服务，费用是：2400元每年！！！尽管价格很昂贵、而且限制也非常大，但仍有大量的店铺购买了这一服用！

阿里巴巴、京东、蘑菇街等这些店铺中，暂时都是开放写css的，但很多没有基础的看官根本就不会写！！！所以，你会看到这样一种现象：在淘宝网上、在qq群里、在各大论坛中都有人出售店铺装修的服务，至于价格，看需求及对方的报价。

这篇文章从某种程序上讲，并没有太大意义，反正已经css开放了，我可以写呀！看教程没直到一点作用。

但事实上真的这样吗？

网上有很多免费在线生成的平台，明明可以帮助看官快速搞定自己搞定不了的问题，可还是有些看官宁愿去付费找人装修也不愿自己动手尝试一下下...... 对于此，艺灵只能呵呵......

当您看官了这篇教程，如果还存在以下疑惑：阿里巴巴店铺怎么全屏、阿里巴巴店铺怎么写css、css鼠标滑过效果怎么搞时，请联系艺灵，价格及售后服务绝对包您满意！！！

七、福利　(以下内容更新于2016-10-14 15:29)

为了让看官更方便的装修阿里巴巴店铺装修，艺灵已制作了一个工具，看官只需要粘贴后生成代码就行了！快捷通道→→阿里巴巴店铺代码转换工具

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2016-06-30/419.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。