微信公众号排版背后的技术解析

由于简书很有效果不支持，欢迎移步微信公众号排版背后的技术解析 查看具体的效果

单纯的微信公众号文章编辑器很难满足大家对酷炫排版的需求，因此冒出了一些第三方图文排版的工具。工具很多，特效也不少，但是背后的原理却大同小异，掌握了原理，你就可以抛开这些工具进行定制化了。

一些说明以及"抄袭"的方法

和所有网页排版一样，公众号排版的原理也是基于HTML和CSS的知识，关于基本的文字排版如加粗、行间距、字体颜色、字体大小、斜体、下划线、背景色等，由于是可以通过公众号的编辑器直接来实现，这里就不再多做介绍，只介绍编辑器实现不了的排版特效的方法。

公众号文章里面无论多么酷炫多么复杂的排版特效，我们都可以直接通过复制并粘贴到公众号编辑器里面的方式来抄袭它，不过使用这种方式，只能够基于原来的样式在上面修改一下文字。大家也还可以使用浏览器自带的开发者工具来查看排版特效，这些特效用代码是怎么做到的在开发者工具面前都一览无余，所以说排版特效对开发者工具来说没有什么秘密可言，不仅如此，你也还可以使用开发者工具基于该样式来修改样式本身，相信参加过HackWeek网页开发活动的朋友都比较熟悉这种方式。

通常排版特效所对应的代码都是在section标签里面。公众号的编辑器有很多标签是不兼容的，比如a标签，这个涉及到公众号的权限问题，只有认证的微信服务号才支持a标签，比如大家用的最多的div标签，公众号的编辑器也不支持，所以要是把样式写在section标签里面。

利用CSS的基本属性

CSS有很多属性是用可视化的编辑器实现不了的，比如圆角、虚线、边框、渐变色、透明度、阴影等等，这些虽然是css经常会使用到的基本属性，但是稍加组合运用，就能做出普通人觉得很高大上的样式来。比如：

特效案例

特效解读：这样的特效，就是使用了css的border的诸多属性。左侧的黄色部分是使用border的border-left-color、border-width、border-radius，而右侧则是box-shadow。

特效案例

特效解读：这个特效呢，则是使用了背景的渐变色linear-gradient以及border的dashed虚线样式还有就是圆角border-radius。

上述这些都是非常基本的css知识，只要稍加了解即可掌握，这些对从来没有接触过技术的微信运营人员来说，只需要一周的时间就能游刃有余。

利用CSS绘制的图形

公众号排版的很多简单图形是使用CSS的属性来绘制的，长方形、正方形、圆形这些都比如容易，用CSS还可以绘制三角形、梯形、平行四边形等其他图形，也可以将css绘制的简单图形自由组合起来甚至可以绘制出icon小图标。使用css的内联式写法，将css代码写在html的section标签里面，这样就可以复制粘贴到公众号的编辑器里面了。

用CSS绘制的图形我们可以通过多个section嵌套把这些图形给组合起来，这样就能绘制更加复杂的样式应用到排版之中。

特效案例

特效解读：上面的标题特效主要是应用了CSS盒子模型相关知识，首先是给整个特效设置display:inline-block; 让整个特效拥有了block元素可以设置width和height以及inline元素不换行的特性；4个角对应着四个section标签，比如左上角只定义border-top和border-left为：2px solid rgb(252, 180, 43)；这样就画出了一个拐角，再用float来指定标签的位置；而中间的长方形则让margin-top和margin-bottom的值为负数，让样式更加紧凑；而关于边框和背景的颜色，了解css的改起来就很容易啦~~

CSS的图片背景

使用CSS的图片背景background-image的属性能够让公众号的排版极富创意，所能发挥的空间非常大，因为不同的背景图片素材就能让排版个性化起来，而图片素材所对应的设计思路每个人都有自己独到的理解，而且获取图片素材对很多人来说是非常容易的。

把图片作为背景和插入图片是有很大的不同的，插入图片除非是用ps，否则你没法在上面写字，而且背景图片不支持长按，是不是更酷？😎

图片背景说明

找张文艺一点的图片

用它做公众号的背景

注意背景与文字的搭配

不要太花哨

素雅就行

(案例来自秀米)

上面这个案例是来自秀米，案例背后的技术并不难，但是掌握了技术还不够，图与文如何配搭、如何布局才好看，这才能显得出排版的功力。

值得一提的是，大家都知道公众号文章支持插入gif图片，gif的图片可以让内容更加生动，不过css的背景图片同样也支持gif哦。

Gif图片在网上也有不少资源

而且gif图片制作起来也不难

微信、QQ等表情也是gif的哦

如何应用看大家的创意啦

这个案例是我随便做的，更多的案例要靠大家的创意啦~~

CSS固定高度

当你有一大段的文字需要把它写在公众号里面，但是又不想让它占据文章过长的页面，比如要展示一首歌的歌词或者一段长长的代码，但是歌词内容以及代码太长，全部粘贴上来用一般的方式就占了太大的面积，那有没有更好的方式呢？

我们可以给section标签设置一个固定的高度，比如height:10em；当文本的内容超出10em的时候，文本内容会被折叠，你可以通过滚动的方式来查看整个内容。

比如我把效果代码粘贴在这里

文本内容写在这里即可

SVG特效

微信公众号也兼容SVG动画，下面是用SVG动画制作出来的弹幕效果，这里只是用了一行的弹幕，你也可以做出多行来，HTML网页的弹幕效果通常就是用SVG来实现的。

弹幕案例

那使用SVG除了可以做弹幕效果以外，还可以做哪些动画效果呢？这个取决于SVG的动画特性，SVG动画可以按照指定的轨迹，比如可以让汽车icon🚘跑在指定的轨迹如画出来的山路上；让蜘蛛🕷、蚂蚁🐜满屏幕乱跑；关于有哪些icon，可以查看之前写的一篇文章《有趣的微信字符套路》，后台回复关键词"001"即可查看该文章。

又到了脑暴的时间：

用CSS可以画出哪些有趣的图形呢？

使用CSS背景图片可以做出哪些有创意的效果？

SVG动画还有哪些妙用呢？

如果你遇到了问题，或者有更好的经验与创意，欢迎大家关注HackWeek技术社区(微信号：hackweekorg)，在公众号后台回复"0"，加群一起交流。