個(gè)點(diǎn)擊顯示玩法，讓你的圖文排版錦上添花~

很多公眾號(hào)圖文都會(huì)用到一些“特殊”玩法，一般需要用戶主動(dòng)點(diǎn)擊空白區(qū)域，圖片或者文字才會(huì)慢慢的顯現(xiàn)出來。

使用這種樣式，一方面可以充分滿足讀者的探索欲和好奇心，讓用戶主動(dòng)參與到互動(dòng)中來，另一方面還能給原本單調(diào)的微信圖文增加一些趣味性。

這種樣式究竟是如何做出來的呢？又如何在自己的公眾號(hào)圖文中添加使用這樣的樣式呢？今天我就來給大家分享如何玩轉(zhuǎn)“空白”樣式！

一、空白樣式展示

先給大家展示幾個(gè)比較熱門的空白樣式。

⑴ 樣式ID：5487

用戶點(diǎn)擊空白處，3秒之后文字才會(huì)顯現(xiàn)出來。該樣式可以說是神秘感和互動(dòng)感兼具。

⑵ 樣式ID：5488

用戶點(diǎn)擊空白處，文字會(huì)自下而上逐行顯示。

⑶ 樣式ID：5490

用戶點(diǎn)擊空白處，文字會(huì)立即顯示出來。

⑷ 樣式ID：24913

用戶點(diǎn)擊空白處，圖片會(huì)立即顯示出來。圖片建議尺寸280*420像素。

注意：上文提到的點(diǎn)擊空白顯示文字樣式，單行文字過多會(huì)自動(dòng)換行。當(dāng)所有文字超出樣式最高寬度限制時(shí)，會(huì)自動(dòng)添加滾動(dòng)條，用戶可以通過手指滑動(dòng)查看更多內(nèi)容。

二、空白樣式查找

這里提供兩個(gè)比較好用的查找方法，以便大家能快速找到需求樣式。

⑴ 輸入上文中標(biāo)注的樣式ID，快速定位所需樣式。

⑵ 在素材搜索框中輸入樣式關(guān)鍵詞，比如說“空白”或者“隱藏”進(jìn)行搜索。

找到需求樣式之后，我們只需點(diǎn)擊，即可將樣式寫入編輯區(qū)域，進(jìn)行后續(xù)的修改和使用。

三、空白樣式使用

接下來，我會(huì)分別介紹點(diǎn)擊空白顯示文字樣式和點(diǎn)擊空白顯示圖片樣式的使用方法。

點(diǎn)擊空白顯示文字樣式，我這里提供兩個(gè)不需要修改代碼，而且非常簡單的方法。

⑴ 通過工具條中的彈幕按鈕進(jìn)行修改

① 點(diǎn)擊樣式，在彈出的工具條右側(cè)找到圓形按鈕【彈】。

② 左鍵單擊圓形按鈕【彈】，在出現(xiàn)的彈窗中設(shè)置文字的行數(shù)，修改文字內(nèi)容；也可以修改文字顏色、字號(hào)、對(duì)文字內(nèi)容進(jìn)行加粗，調(diào)整文字運(yùn)動(dòng)快慢等。

③ 設(shè)置完畢點(diǎn)擊“確定”即可。

⑵ 通過移動(dòng)光標(biāo)進(jìn)行修改

鼠標(biāo)左鍵單擊空白位置，樣式文字顯示出來后，雙擊可以看到文字中出現(xiàn)光標(biāo)。我們可以直接刪除文字，并進(jìn)行替換。

移動(dòng)光標(biāo)到文段中，點(diǎn)擊工具欄中的“對(duì)齊方式”工具，即可快速設(shè)置當(dāng)前段落的對(duì)齊方式，例如選擇“居左”對(duì)齊（如下圖）。

點(diǎn)擊空白顯示圖片樣式的使用也非常的簡單。

① 點(diǎn)擊樣式，在彈出的工具條中找到“背景圖”按鈕。

② 點(diǎn)擊“背景圖”，在彈出的對(duì)話窗中選擇“圖片”。這里我們可以“本地上傳”圖片，也可以選擇之前上傳的“我的圖片”。

注意：如果將樣式寫入編輯器后，點(diǎn)擊空白處，文字沒有顯示，只需要雙擊工具欄中的HTML按鈕，然后再點(diǎn)擊空白處，文字即可顯示。

至此，關(guān)于空白樣式的使用已經(jīng)分享完畢啦，但是，想要玩轉(zhuǎn)空白樣式，還需要你開動(dòng)腦筋，發(fā)揮自己的想象力和創(chuàng)造力，發(fā)現(xiàn)更多空白樣式的使用場(chǎng)景。

比如說設(shè)計(jì)一些互動(dòng)環(huán)節(jié)。再比如說猜謎語，做選擇題等，也可以藏紅包口令，或者福利海報(bào)等。

法1：使用onclick事件

<input type="button" value="按鈕"
onclick="javascrtpt:window.location. />

或者直接使用button標(biāo)簽

<button onclick="window.location.>百度</button>

方法2：在button標(biāo)簽外套一個(gè)a標(biāo)簽

<a >
 <button>百度</button>
</a>

或使用

<a ><input type="button" value='百度'></a>

方法3：使用JavaScript函數(shù)

一篇文章我們說了單選框、多選框以及下拉框的使用，今天呢我們繼續(xù)看一下表單剩下的常用控件：提交按鈕以及重置按鈕。

（1）提交按鈕

提交按鈕，顧名思義就是當(dāng)我們填好了表單中的數(shù)據(jù)之后，我們需要通過提交按鈕來將數(shù)據(jù)傳遞到后臺(tái)的服務(wù)器中，供后臺(tái)程序使用。

使用語法：<input type="submit" value="提交數(shù)據(jù)">

詳細(xì)講解：

1、type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用，才能正常的進(jìn)行表單的提交。（或者使用JavaScript代碼來觸發(fā)提交事件，這個(gè)到后期我們講解js的時(shí)候我進(jìn)行介紹）

2、value：按鈕上顯示的文字，顯示按鈕的名稱。

（2）重置按鈕

當(dāng)用戶需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶輸入“用戶名”后，發(fā)現(xiàn)書寫有誤，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以。

使用語法：<input type="reset" value="重置數(shù)據(jù)">

詳細(xì)講解：

1、type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用，點(diǎn)擊按鈕會(huì)將form表單內(nèi)的所有信息還原到初始未輸入的狀態(tài)。

2、value：按鈕上顯示的文字，顯示重置按鈕的名稱

使用練習(xí)：

我們創(chuàng)建一個(gè)表單，數(shù)據(jù)我們以post的形式提交到百度首頁，表單里邊有姓名和年齡的輸入框，并且添加提交數(shù)據(jù)按鈕以及重置數(shù)據(jù)按鈕。具體代碼如下圖所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

我們?cè)谛彰湍挲g輸入框中輸入內(nèi)容，點(diǎn)擊重置數(shù)據(jù)既可以清空里邊的內(nèi)容，還原到初始狀態(tài)，點(diǎn)擊提交數(shù)據(jù)按鈕，那么數(shù)據(jù)將會(huì)提交到我們的指定鏈接處。

以上呢就是表單最常用的一些控件了，接下來我們對(duì)學(xué)到的表單知識(shí)進(jìn)行一次綜合的測(cè)試，我們來寫一個(gè)完整的表單包含我們學(xué)到的所有知識(shí)。

我們?cè)谶@里就寫一個(gè)網(wǎng)站制作常用的留言表，表格名稱就叫留言表，然后表中包含有姓名輸入框、性別單選框（默認(rèn)選中男）、愛好多選框（默認(rèn)選中第一個(gè)）、所在地區(qū)下拉框、留言內(nèi)容多行文本框，以及提交信息按鈕和重置信息按鈕。數(shù)據(jù)提交呢我們還是提交到百度，提交類型我們使用post。具體的代碼如下圖所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

好了，到了這里我們的第一個(gè)表單就算是做完了，到這有人就會(huì)問了，為什么別人的代碼在瀏覽器上看起來都是那么的規(guī)整，我這么寫完看著怎么這么丑，接下來的文章我們將為大家介紹css的知識(shí)了，學(xué)習(xí)了css你也可以將你的頁面做的高達(dá)上起來。最后大家看完一定要自己動(dòng)手寫一寫，只有自己寫出的代碼才能體會(huì)到其中的樂趣，多加練習(xí)才是王道。

每日金句：人生最大的喜悅是每個(gè)人都說你做不到，你卻完成它了！喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。