如何在有限的空間中將各種不同的信息有機(jī)的組合起來并呈現(xiàn)給您的訪客,這是一個問題,今天分享的這一款精致的首頁四格通過圖文混排的方式將各種繁雜的信息有序的呈現(xiàn)在您訪客面前,極大的提升了訪客獲取信息效率。
優(yōu)設(shè)的四格長這樣:

看著就很舒服,很精致,我就想模仿下來,實際操作發(fā)現(xiàn)他的代碼太過繁瑣,只能放一放。
意外發(fā)現(xiàn)一個網(wǎng)站有著類似的效果,長這樣:

兩者看起來差不多,功能也類似,我就再試試,你們那仿下來,如你所見,結(jié)果還是很順利的,我模仿的在2017主題網(wǎng)站中的實際效果如下:

因為兩側(cè)的滑動功能使用了JS,我就去掉了。
如何使用?
點擊下方的Demo按鈕,右擊鼠標(biāo)查看源代碼,根據(jù)代碼注釋復(fù)制代碼到自己需要的地方,例如古登堡的HTML區(qū)塊或是相關(guān)主題文件,另外,記得看代碼注釋哦(。???)ノ
圖標(biāo)?
圖標(biāo)可參考下面這篇教程;
我這里還準(zhǔn)備了其他有趣的四格: