淘宝店铺装修代码怎么弄(阿里巴巴PC店铺装修的自定义模块代码植入方式介绍)

店内定制模块是最重要的,甚至是阿里巴巴或淘宝等网店装修店铺的唯一途径。所以,了解自定义模块的代码植入规则,是店铺装修非常重要的前提。

本文的做法和观点是基于阿里巴巴国内PC店铺装修。要阅读本文,您可能需要以下先决条件:

1.阿里巴巴PC store的基本认知概念;

2.知道如何添加阿里巴巴的定制模块;

3.基本的HTML和CSS知识。

淘宝店铺装修代码大全

顾名思义,“自定义内容”就是可以DIY的东西。当然,这个模块本身也有自己的规则。至于这个模块本身的使用限制,估计有无穷无尽的办法。在作者看来,与其写一大堆失败的例子,不如提供一些例子来证明已经使用过了。

1. 使用内联方式写进CSS



红色下划线部分是内联CSS。一般情况下,阿里的自定义模块是不会对CSS样式代码进行过滤的,但笔者发现,对于上述一串代码,系统会自动过滤掉url(背景图片地址),更多的过滤标准只能在实践中找到,然后通过其他方式解决。

2. 按照常规的写法

常规编写是指在HTML标记中编写类或Id,以匹配相应的CSS样式。当然,在这里,不要通过导入CSS文件来导入CSS样式。



这种编写方式的优点是代码清晰,易于修改,但遗憾的是,如果直接复制到自定义代码区,你会发现最终的代码会变成如下图所示。



可见以上两种方法并不能直接解决问题,因为自定义模块的过滤机制基本上破坏了你整个代码的核心。如果纯粹写简单代码,可以尝试第一种方法,但是如果你的代码是大模块,显然第一种方法有点繁琐,而且这种方法不能使用伪类(比如鼠标悬停的基本伪类:hover等。).所以笔者重点分享如何让第二种方法在自定义模块中发挥作用。请关注下一篇文章。

您可以还会对下面的文章感兴趣

使用微信扫描二维码后

点击右上角发送给好友