个点击显示玩法，让你的图文排版锦上添花~

很多公众号图文都会用到一些“特殊”玩法，一般需要用户主动点击空白区域，图片或者文字才会慢慢的显现出来。

使用这种样式，一方面可以充分满足读者的探索欲和好奇心，让用户主动参与到互动中来，另一方面还能给原本单调的微信图文增加一些趣味性。

这种样式究竟是如何做出来的呢？又如何在自己的公众号图文中添加使用这样的样式呢？今天我就来给大家分享如何玩转“空白”样式！

一、空白样式展示

先给大家展示几个比较热门的空白样式。

⑴ 样式ID：5487

用户点击空白处，3秒之后文字才会显现出来。该样式可以说是神秘感和互动感兼具。

⑵ 样式ID：5488

用户点击空白处，文字会自下而上逐行显示。

⑶ 样式ID：5490

用户点击空白处，文字会立即显示出来。

⑷ 样式ID：24913

用户点击空白处，图片会立即显示出来。图片建议尺寸280*420像素。

注意：上文提到的点击空白显示文字样式，单行文字过多会自动换行。当所有文字超出样式最高宽度限制时，会自动添加滚动条，用户可以通过手指滑动查看更多内容。

二、空白样式查找

这里提供两个比较好用的查找方法，以便大家能快速找到需求样式。

⑴ 输入上文中标注的样式ID，快速定位所需样式。

⑵ 在素材搜索框中输入样式关键词，比如说“空白”或者“隐藏”进行搜索。

找到需求样式之后，我们只需点击，即可将样式写入编辑区域，进行后续的修改和使用。

三、空白样式使用

接下来，我会分别介绍点击空白显示文字样式和点击空白显示图片样式的使用方法。

点击空白显示文字样式，我这里提供两个不需要修改代码，而且非常简单的方法。

⑴ 通过工具条中的弹幕按钮进行修改

① 点击样式，在弹出的工具条右侧找到圆形按钮【弹】。

② 左键单击圆形按钮【弹】，在出现的弹窗中设置文字的行数，修改文字内容；也可以修改文字颜色、字号、对文字内容进行加粗，调整文字运动快慢等。

③ 设置完毕点击“确定”即可。

⑵ 通过移动光标进行修改

鼠标左键单击空白位置，样式文字显示出来后，双击可以看到文字中出现光标。我们可以直接删除文字，并进行替换。

移动光标到文段中，点击工具栏中的“对齐方式”工具，即可快速设置当前段落的对齐方式，例如选择“居左”对齐（如下图）。

点击空白显示图片样式的使用也非常的简单。

① 点击样式，在弹出的工具条中找到“背景图”按钮。

② 点击“背景图”，在弹出的对话窗中选择“图片”。这里我们可以“本地上传”图片，也可以选择之前上传的“我的图片”。

注意：如果将样式写入编辑器后，点击空白处，文字没有显示，只需要双击工具栏中的HTML按钮，然后再点击空白处，文字即可显示。

至此，关于空白样式的使用已经分享完毕啦，但是，想要玩转空白样式，还需要你开动脑筋，发挥自己的想象力和创造力，发现更多空白样式的使用场景。

比如说设计一些互动环节。再比如说猜谜语，做选择题等，也可以藏红包口令，或者福利海报等。

法1：使用onclick事件

<input type="button" value="按钮"
onclick="javascrtpt:window.location.href='http://www.baidu.com/'" />

或者直接使用button标签

<button onclick="window.location.href = 'https://www.baidu.com/'">百度</button>

方法2：在button标签外套一个a标签

<a href="http://www.baidu.com/">
 <button>百度</button>
</a>

或使用

<a href="http://www.baidu.com/"><input type="button" value='百度'></a>

方法3：使用JavaScript函数

一篇文章我们说了单选框、多选框以及下拉框的使用，今天呢我们继续看一下表单剩下的常用控件：提交按钮以及重置按钮。

（1）提交按钮

提交按钮，顾名思义就是当我们填好了表单中的数据之后，我们需要通过提交按钮来将数据传递到后台的服务器中，供后台程序使用。

使用语法：<input type="submit" value="提交数据">

详细讲解：

1、type：只有当type值设置为submit时，按钮才有提交作用，才能正常的进行表单的提交。（或者使用JavaScript代码来触发提交事件，这个到后期我们讲解js的时候我进行介绍）

2、value：按钮上显示的文字，显示按钮的名称。

（2）重置按钮

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

使用语法：<input type="reset" value="重置数据">

详细讲解：

1、type：只有当type值设置为reset时，按钮才有重置作用，点击按钮会将form表单内的所有信息还原到初始未输入的状态。

2、value：按钮上显示的文字，显示重置按钮的名称

使用练习：

我们创建一个表单，数据我们以post的形式提交到百度首页，表单里边有姓名和年龄的输入框，并且添加提交数据按钮以及重置数据按钮。具体代码如下图所示：

在网页中的显示效果就如下图所示：

我们在姓名和年龄输入框中输入内容，点击重置数据既可以清空里边的内容，还原到初始状态，点击提交数据按钮，那么数据将会提交到我们的指定链接处。

以上呢就是表单最常用的一些控件了，接下来我们对学到的表单知识进行一次综合的测试，我们来写一个完整的表单包含我们学到的所有知识。

我们在这里就写一个网站制作常用的留言表，表格名称就叫留言表，然后表中包含有姓名输入框、性别单选框（默认选中男）、爱好多选框（默认选中第一个）、所在地区下拉框、留言内容多行文本框，以及提交信息按钮和重置信息按钮。数据提交呢我们还是提交到百度，提交类型我们使用post。具体的代码如下图所示：

在网页中的显示效果就如下图所示：

好了，到了这里我们的第一个表单就算是做完了，到这有人就会问了，为什么别人的代码在浏览器上看起来都是那么的规整，我这么写完看着怎么这么丑，接下来的文章我们将为大家介绍css的知识了，学习了css你也可以将你的页面做的高达上起来。最后大家看完一定要自己动手写一写，只有自己写出的代码才能体会到其中的乐趣，多加练习才是王道。

每日金句：人生最大的喜悦是每个人都说你做不到，你却完成它了！喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。