点击下方空白区域查看答案

关于编辑器版式代码的介绍...



最近在微信订阅号里看到一个新的版式，点击下方空白区域查看答案，当点击时，就会出现设置的文字，一开始文字是看不到的

其实，也不算太长。。。

我们来看一下具体的代码吧



最外面是 标签

标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

相当于给它划定了一个版块。

至于第一行 标签里面的class是html类选择器，data是一个数据属性而已，使用data-* 属性可以来嵌入自定义数据。



接下来就是标签， 标签定义段落。

在style="" 里面的是css样式，就是修饰这个标签里面的元素：

line-height：行高；

text-align: center; 文本居中；

white-space: normal;white-space： 属性设置如何处理元素内的空白。规定段落中的文本不进行换行；

color：颜色；font-size：字体大小；

这些就是  点击下方空白区域查看答案 ▼  部分的代码了



接下来又是一个版块，这个就是放置文本的地方了

height: 180px; 这个地方就是设置的固定高度，可以通过这个来更改固定高度180px；

overflow：裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话；

overflow-x: hidden：裁剪内容 - 不提供滚动机制。

overflow-y: auto：如果溢出框，则应该提供滚动机制。

box-sizing：规定两个并排的带边框的框。

border-box：为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

（说实话，这个具体我也没有看太懂。。。。）
padding：设置内边距。

border: 1px solid #eee;  设置边框，1px，实线，颜色为#eee(灰色)



里面的标签

css样式：

margin-bottom：属性设置元素的下外边距。

white-space: normal;white-space： 属性设置如何处理元素内的空白。规定段落中的文本不进行换行；

标签被用来组合文档中的行内元素。

就是中间的那条分隔线

其实，到这里，这个版块差不多就确定了，文版框加上字体、内容都可以写在里面了。

但是，没有下面那些代码，这个版式就会变成这样

这个部分才是让这样样式显示的部分

标签：定义文本水平居中显示效果。

标签和标签是连着用的：

html5-svg 标签矩形 （rect  ）

rect 元素的 width 和 height 属性可定义矩形的高度和宽度、style 属性用来定义 CSS 属性、CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）、CSS 的 stroke-width 属性定义矩形边框的宽度、CSS 的 stroke 属性定义矩形边框的颜色。

transform：旋转 div 元素。

-webkit- -moz- -o- 是为了设置不同的浏览器支持

rotateZ(0deg)：定义沿着 Z 轴的 3D 旋转。

xmlns 属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL，它定义了一个命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。

描述元素的淡入淡出效果。

就是这个动画效果，使点击空白区域就可以查看答案，画龙点睛的部分（不过，这个我也不会。。很尴尬，真的没有学过这个，但是我会按照这样用，生成一个这样的效果）

微信编辑器的版式可以查看源代码一开始是在i排版编辑器里面，135也是后来才有的。以前我曾经选择一个版式打开源代码看过，但是并没有真正注意，直到看到微信上推了这样的版式才想起来网页编辑器上面的代码。

对于大神来说，其实可以通过自己写代码来生成自己想要的版式。如果你的脑洞比较大的话可以创造出很多新奇的版式来~

第一次写这样的文章，也像一篇博客，我的博客网站现在还没搭建好，所以，就先拿这个试试啦

    关注 张中坤