真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

AmazeUI折疊式卡片布局,整合內(nèi)容列表、表格組件的案例分析-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(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)容列表與表格組件。

AmazeUI折疊式卡片布局,整合內(nèi)容列表、表格組件的案例分析

整個(gè)頁(yè)面的代碼如下:





    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        折疊式布局下的內(nèi)容列表、表格
     
    
        

折疊式卡片布局

                                                   卡片1-文字                                                                                                 純屬文字                     
                                                           卡片2-內(nèi)容列表                                                                                                                                                                                                標(biāo)題1                                 2015-05-12                                                                                           超長(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)標(biāo)題2                                 2015-05-12                                                                                           標(biāo)題3                                 2015-05-12                                                                                  
                    
                                                           卡片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)把它分享出去讓更多的人看到。


當(dāng)前名稱:AmazeUI折疊式卡片布局,整合內(nèi)容列表、表格組件的案例分析-創(chuàng)新互聯(lián)
URL網(wǎng)址:http://weahome.cn/article/cdiidj.html

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部