這篇文章將為大家詳細(xì)講解有關(guān)AmazeUI折疊式卡片布局,整合內(nèi)容列表、表格組件的案例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來(lái),先為射洪等服務(wù)建站,射洪等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為射洪企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。折疊式卡片布局在PC版網(wǎng)站中可能不常見,但是在手機(jī)版,小屏幕的網(wǎng)頁(yè)瀏覽會(huì)大發(fā)異彩。
AmazeUI也提供了折疊式卡片布局,雖然官網(wǎng)上有例子,但是這種折疊式卡片布局,整合內(nèi)容列表、表格組件還是需要一番功夫。
比如下圖,利用AmazeUI的折疊式卡片布局,整合其提供的內(nèi)容列表與表格組件。
整個(gè)頁(yè)面的代碼如下:
折疊式布局下的內(nèi)容列表、表格 折疊式卡片布局
- 卡片1-文字
純屬文字
- 卡片2-內(nèi)容列表
- 卡片3-表格
表頭1 表頭2 表頭3 內(nèi)容1 超長(zhǎng)超長(zhǎng)超長(zhǎng)內(nèi)容2 內(nèi)容3 內(nèi)容1 超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)內(nèi)容2 內(nèi)容3 內(nèi)容1 超長(zhǎng)超長(zhǎng)超長(zhǎng)內(nèi)容2 內(nèi)容3
關(guān)鍵的地方,注釋都有注釋了。也提供了超長(zhǎng)內(nèi)容的處理方式。
dl-dt-dd是HTML中原生態(tài)的列表布局,與ul-li這一組是一樣地位,但是用得少,可能給人淡忘了。
如果AmazeUI的折疊式卡片布局里面要整合組件,必須移除底部那20px的留白,否則很難看的。感覺這個(gè)組件專門為文字設(shè)置的,框架的原義不希望你整合東西。
同時(shí)表格注意設(shè)置好第一行的各個(gè)寬度,以規(guī)定好各行。
關(guān)于“AmazeUI折疊式卡片布局,整合內(nèi)容列表、表格組件的案例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。