layui卡片式列表_AmazeUI折叠式卡片布局，整合内容列表、表格组件实现

这篇文章我们来讲一下在网站建设中&＃xff0c;AmazeUI折叠式卡片布局&＃xff0c;整合内容列表、表格组件实现。本文对大家进行网站开发设计工作或者学习都有一定帮助&＃xff0c;下面让我们进入正文。

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

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

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

整个页面的代码如下&＃xff1a;

关键的地方&＃xff0c;注释都有注释了。也提供了超长内容的处理方式。

dl-dt-dd是HTML中原生态的列表布局&＃xff0c;与ul-li这一组是一样地位&＃xff0c;但是用得少&＃xff0c;可能给人淡忘了。

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

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

到此这篇关于AmazeUI折叠式卡片布局&＃xff0c;整合内容列表、表格组件实现的文章就介绍到这了,更多相关AmazeUI折叠式卡片布局内容请搜索本站以前的文章或继续浏览下面的相关文章&＃xff0c;感谢支持&＃xff01;

相关阅读