Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
個點擊顯示玩法,讓你的圖文排版錦上添花~
很多公眾號圖文都會用到一些“特殊”玩法,一般需要用戶主動點擊空白區域,圖片或者文字才會慢慢的顯現出來。
使用這種樣式,一方面可以充分滿足讀者的探索欲和好奇心,讓用戶主動參與到互動中來,另一方面還能給原本單調的微信圖文增加一些趣味性。
這種樣式究竟是如何做出來的呢?又如何在自己的公眾號圖文中添加使用這樣的樣式呢?今天我就來給大家分享如何玩轉“空白”樣式!
先給大家展示幾個比較熱門的空白樣式。
⑴ 樣式ID:5487
用戶點擊空白處,3秒之后文字才會顯現出來。該樣式可以說是神秘感和互動感兼具。
⑵ 樣式ID:5488
用戶點擊空白處,文字會自下而上逐行顯示。
⑶ 樣式ID:5490
用戶點擊空白處,文字會立即顯示出來。
⑷ 樣式ID:24913
用戶點擊空白處,圖片會立即顯示出來。圖片建議尺寸280*420像素。
注意:上文提到的點擊空白顯示文字樣式,單行文字過多會自動換行。當所有文字超出樣式最高寬度限制時,會自動添加滾動條,用戶可以通過手指滑動查看更多內容。
二、空白樣式查找
這里提供兩個比較好用的查找方法,以便大家能快速找到需求樣式。
⑴ 輸入上文中標注的樣式ID,快速定位所需樣式。
⑵ 在素材搜索框中輸入樣式關鍵詞,比如說“空白”或者“隱藏”進行搜索。
找到需求樣式之后,我們只需點擊,即可將樣式寫入編輯區域,進行后續的修改和使用。
三、空白樣式使用
接下來,我會分別介紹點擊空白顯示文字樣式和點擊空白顯示圖片樣式的使用方法。
點擊空白顯示文字樣式,我這里提供兩個不需要修改代碼,而且非常簡單的方法。
⑴ 通過工具條中的彈幕按鈕進行修改
① 點擊樣式,在彈出的工具條右側找到圓形按鈕【彈】。
② 左鍵單擊圓形按鈕【彈】,在出現的彈窗中設置文字的行數,修改文字內容;也可以修改文字顏色、字號、對文字內容進行加粗,調整文字運動快慢等。
③ 設置完畢點擊“確定”即可。
⑵ 通過移動光標進行修改
鼠標左鍵單擊空白位置,樣式文字顯示出來后,雙擊可以看到文字中出現光標。我們可以直接刪除文字,并進行替換。
移動光標到文段中,點擊工具欄中的“對齊方式”工具,即可快速設置當前段落的對齊方式,例如選擇“居左”對齊(如下圖)。
點擊空白顯示圖片樣式的使用也非常的簡單。
① 點擊樣式,在彈出的工具條中找到“背景圖”按鈕。
② 點擊“背景圖”,在彈出的對話窗中選擇“圖片”。這里我們可以“本地上傳”圖片,也可以選擇之前上傳的“我的圖片”。
注意:如果將樣式寫入編輯器后,點擊空白處,文字沒有顯示,只需要雙擊工具欄中的HTML按鈕,然后再點擊空白處,文字即可顯示。
至此,關于空白樣式的使用已經分享完畢啦,但是,想要玩轉空白樣式,還需要你開動腦筋,發揮自己的想象力和創造力,發現更多空白樣式的使用場景。
比如說設計一些互動環節。再比如說猜謎語,做選擇題等,也可以藏紅包口令,或者福利海報等。
法1:使用onclick事件
<input type="button" value="按鈕" onclick="javascrtpt:window.location. />
或者直接使用button標簽
<button onclick="window.location.>百度</button>
方法2:在button標簽外套一個a標簽
<a > <button>百度</button> </a>
或使用
<a ><input type="button" value='百度'></a>
方法3:使用JavaScript函數
一篇文章我們說了單選框、多選框以及下拉框的使用,今天呢我們繼續看一下表單剩下的常用控件:提交按鈕以及重置按鈕。
提交按鈕,顧名思義就是當我們填好了表單中的數據之后,我們需要通過提交按鈕來將數據傳遞到后臺的服務器中,供后臺程序使用。
使用語法:<input type="submit" value="提交數據">
詳細講解:
1、type:只有當type值設置為submit時,按鈕才有提交作用,才能正常的進行表單的提交。(或者使用JavaScript代碼來觸發提交事件,這個到后期我們講解js的時候我進行介紹)
2、value:按鈕上顯示的文字,顯示按鈕的名稱。
當用戶需要重置表單信息到初始時的狀態時,比如用戶輸入“用戶名”后,發現書寫有誤,可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。
使用語法:<input type="reset" value="重置數據">
詳細講解:
1、type:只有當type值設置為reset時,按鈕才有重置作用,點擊按鈕會將form表單內的所有信息還原到初始未輸入的狀態。
2、value:按鈕上顯示的文字,顯示重置按鈕的名稱
使用練習:
我們創建一個表單,數據我們以post的形式提交到百度首頁,表單里邊有姓名和年齡的輸入框,并且添加提交數據按鈕以及重置數據按鈕。具體代碼如下圖所示:
在網頁中的顯示效果就如下圖所示:
我們在姓名和年齡輸入框中輸入內容,點擊重置數據既可以清空里邊的內容,還原到初始狀態,點擊提交數據按鈕,那么數據將會提交到我們的指定鏈接處。
以上呢就是表單最常用的一些控件了,接下來我們對學到的表單知識進行一次綜合的測試,我們來寫一個完整的表單包含我們學到的所有知識。
我們在這里就寫一個網站制作常用的留言表,表格名稱就叫留言表,然后表中包含有姓名輸入框、性別單選框(默認選中男)、愛好多選框(默認選中第一個)、所在地區下拉框、留言內容多行文本框,以及提交信息按鈕和重置信息按鈕。數據提交呢我們還是提交到百度,提交類型我們使用post。具體的代碼如下圖所示:
在網頁中的顯示效果就如下圖所示:
好了,到了這里我們的第一個表單就算是做完了,到這有人就會問了,為什么別人的代碼在瀏覽器上看起來都是那么的規整,我這么寫完看著怎么這么丑,接下來的文章我們將為大家介紹css的知識了,學習了css你也可以將你的頁面做的高達上起來。最后大家看完一定要自己動手寫一寫,只有自己寫出的代碼才能體會到其中的樂趣,多加練習才是王道。
每日金句:人生最大的喜悅是每個人都說你做不到,你卻完成它了!喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。