高颜值的微信公众号图文消息排版

概述

提供一种更适合阅读的公众号图文排版样式，满足高颜值图文展示需求。它使用了typo.css和Entry.css。它有如下优点：

块级元素

段落和换行

段落的HTML只使用div和p。它们的行高、行首是否缩近两个中文字都可以自定义。换行也可以使用br标签实现。每行默认宽度可容纳40中文字左右，确保一行之内断句较少，适宜阅读。

当然也有这种没有用标签包裹起来的文字。

文章内部标题共分为四种，使用h1标签作为一级标题，h2作为二级标题，h3标签作为三级标题，h4、h5或h6标签作为四级标题。

样例

样例样例

样例样例样例

样例样例样例样例

样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例

列表

列表样式分为有序列表ol和无序列表ul两种，这两种可以相互嵌套。没有对列表样式做过多的修改，还是使用浏览器默认样式。

列表的嵌套样式如下：

  1. 第一层有序列表
    1. 第二层有序列表
      1. 第三层有序列表
      2. 第三层有序列表
    2. 第二层有序列表
  2. 第一层有序列表

区块引用

区块引用只使用blockquote标签。它们的样式没有过多地修饰，只是使用了不同于主文字体的字体，默认为楷体。并且左侧加了颜色比字体颜色稍淡的边框。区块引用的样例如下：

人生不过是一个行走的影子，一个在舞台上指手划脚的笨拙的怜人，登场片刻，便在无声无息中悄然退去，这是一个愚人所讲的故事，充满了喧哗和骚动，却一无所指。 麦克白

代码区块

代码区块样式使用pre标签作为容器，且内部可选地嵌入code标签。微信公众号图文中不会自动代码高亮。

<link rel="stylesheet" href="assets/prism.css" />
<pre><code class="language-javascript">
console.log('Test');
</code></pre>
<script src="assets/prism.css"></script>

分割线

分割线样式只能使用hr标签。

表格

表格的样式如下：

浏览器
浏览器型号版本号
IE9+
Chrome14+
Firefox4+
Safari5+
Opera11+
Mobile SafariiOS 6+

行内元素

连接的样式可以自定义链接颜色，且鼠标hover之后下划线不会和中文粘连在一起。例如：普通链接。

强调

强调的样式可以使用strong、u、b或em标签，strong表示语义与样式双重强调，后两者表示样式上的强调。b、bold标签是加粗的样式，em标签则有着重号。u标签的样式是直线下划线，相邻之间也有0.125em的间隔

代码

代码的行内样式使用code标签，你也可以自定义字体和颜色。

图片及视频

图片样式对img标签没有特别设置，但是对figure标签做了设置。样例如下：

这里是一段话
这里是一段话

对img标签做了（不超过容器的）限宽，如下：

这里是一段话

同时也支持video标签。

其他行内样式

  1. 书名号使用cite标签，例如：

    冰与火之歌是一部很棒的魔幻小说！
    Hamlet也是一部很棒的小说！

  2. 缩写使用abbr标签，例如：

    js 的全称是javascript，鼠标放上去看看title值。

  3. 定义使用dfn标签，例如：

    HTML 是超文本标记语言

  4. 标记使用mark标签，例如：

    在这句话里面把这几个字高亮下吧～

  5. 行内引用使用q标签，例如：

    在这句话里面把这几个字引用下吧～

  6. 旁注使用small标签，例如：

    单人间 399 元 含早餐，不含税

  7. 上下标使用sup标签作下标、sub标签作上标，例如：

    105 与 a12

微信公众号图文消息默认样式 高颜值的微信公众号图文消息编辑器