AmazeUI折叠式卡片布局，整合内容列表、表格组件的案例分析

爱秀

作者

这篇文章将为大家详细讲解有关AmazeUI折叠式卡片布局，整合内容列表、表格组件的案例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

折叠式卡片布局在PC版网站中可能不常见，但是在手机版，小屏幕的网页浏览会大发异彩。

AmazeUI也提供了折叠式卡片布局，虽然官网上有例子，但是这种折叠式卡片布局，整合内容列表、表格组件还是需要一番功夫。

比如下图，利用AmazeUI的折叠式卡片布局，整合其提供的内容列表与表格组件。

整个页面的代码如下：




















折叠式布局下的内容列表、表格


折叠式卡片布局



卡片1-文字




纯属文字

卡片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中原生态的列表布局，与ul-li这一组是一样地位，但是用得少，可能给人淡忘了。

如果AmazeUI的折叠式卡片布局里面要整合组件，必须移除底部那20px的留白，否则很难看的。感觉这个组件专门为文字设置的，框架的原义不希望你整合东西。

同时表格注意设置好第一行的各个宽度，以规定好各行。

关于“AmazeUI折叠式卡片布局，整合内容列表、表格组件的案例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

发布于 2021-03-21 22:36:23

海报

162

折叠式卡片布局