AmazeUI折疊式卡片布局，整合內容列表、表格組件的案例分析-創(chuàng)新互聯-四川平武建站

新聞中心

這里有您想知道的互聯網營銷解決方案

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

這篇文章將為大家詳細講解有關AmazeUI折疊式卡片布局，整合內容列表、表格組件的案例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯公司自2013年創(chuàng)立以來，先為射洪等服務建站，射洪等地企業(yè)，進行企業(yè)商務咨詢服務。為射洪企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

折疊式卡片布局在PC版網站中可能不常見，但是在手機版，小屏幕的網頁瀏覽會大發(fā)異彩。

AmazeUI也提供了折疊式卡片布局，雖然官網上有例子，但是這種折疊式卡片布局，整合內容列表、表格組件還是需要一番功夫。

比如下圖，利用AmazeUI的折疊式卡片布局，整合其提供的內容列表與表格組件。

AmazeUI折疊式卡片布局，整合內容列表、表格組件的案例分析

整個頁面的代碼如下：





    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        折疊式布局下的內容列表、表格
     
    
        折疊式卡片布局
        
            
            
                卡片1-文字
                
                
                    
                    
                    純屬文字

卡片2-內容列表

標題1 2015-05-12

超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長標題2 2015-05-12

標題3 2015-05-12

卡片3-表格

表頭1 表頭2 表頭3 內容1 超長超長超長內容2 內容3 內容1 超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長內容2 內容3 內容1 超長超長超長內容2 內容3

關鍵的地方，注釋都有注釋了。也提供了超長內容的處理方式。

dl-dt-dd是HTML中原生態(tài)的列表布局，與ul-li這一組是一樣地位，但是用得少，可能給人淡忘了。

如果AmazeUI的折疊式卡片布局里面要整合組件，必須移除底部那20px的留白，否則很難看的。感覺這個組件專門為文字設置的，框架的原義不希望你整合東西。

同時表格注意設置好第一行的各個寬度，以規(guī)定好各行。

關于“AmazeUI折疊式卡片布局，整合內容列表、表格組件的案例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

新聞標題：AmazeUI折疊式卡片布局，整合內容列表、表格組件的案例分析-創(chuàng)新互聯
網頁地址：http://www.ef60e0e.cn/article/cdiidj.html

99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

新聞中心

折疊式卡片布局

其他資訊