AmazeUI折叠式卡片布局,整合内容列表、表格组件实现


Posted in HTML / CSS onAugust 20, 2020

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

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

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

AmazeUI折叠式卡片布局,整合内容列表、表格组件实现

整个页面的代码如下:

<!--使用HTML5开发-->
<!doctype html>
<html class="no-js">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--自动适应移动屏幕-->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!--优先使用webkit内核渲染-->
        <meta name="renderer" content="webkit">
        <!--不要被百度转码-->
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <!--以下才是引入amazeui资源-->
        <link rel="stylesheet" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <!--引入js的时候要注意,必须先引入jQuery,再引入amazeui,因为这个框架是基于jQuery开发的-->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        <title>折叠式布局下的内容列表、表格</title>
    </head> 
    <body>
        <h1>折叠式卡片布局</h1>
        <div data-am-widget="accordion" class="am-accordion am-accordion-gapped">
            <!--这里是表示标题的背景颜色是灰色-->
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">卡片1-文字</dt>
                <!--这里表示这个面板默认是打开状态-->
                <dd class="am-accordion-bd am-collapse am-in">
                    <div class="am-accordion-content">
                    <!--内容在这里写-->
                    纯属文字
                    </div>
                </dd>
            </dl>
            <dl class="am-accordion-item">
                <dt class="am-accordion-title">卡片2-内容列表</dt>
                <dd class="am-accordion-bd am-collapse">
                    <!--如果这个折叠式布局里面用到的不是纯属的文件,必须加上一个margin-bottom:-20px削去底部的空白-->
                    <!--用到内容列表的话,无须加class="am-accordion-content"属性-->
                    <div style="margin-bottom:-20px">
                        <div class="am-list-news-bd">
                        <ul class="am-list">
                            <li class=" am-list-item-dated">
                                <a href="##" class="am-list-item-hd">标题1</a>
                                <span class="am-list-date">2015-05-12</span>
                            </li>
                            <li class=" am-list-item-dated">
                                <a href="##" class="am-list-item-hd">超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长标题2</a>
                                <span class="am-list-date">2015-05-12</span>
                            </li>
                            <li class=" am-list-item-dated">
                                <a href="##" class="am-list-item-hd">标题3</a>
                                <span class="am-list-date">2015-05-12</span>
                            </li>   
                        </ul>
                        </div>
                    </div>
                </dd>
            </dl>
            <dl class="am-accordion-item">
                <dt class="am-accordion-title">卡片3-表格</dt>
                <dd class="am-accordion-bd am-collapse ">
                    <!--am-table-bordered代表表格列与列之间有线划分,am-table-striped代表表格灰白相间-->
                    <div class="am-accordion-content" style="margin-bottom:-20px">
                        <table class="am-table am-table-radius am-table-striped">
                            <thead>
                                <tr>
                                    <!--这里与HTML一样,必须设置好每一行的表格宽度-->
                                    <th width="33%">表头1</th>
                                    <th width="33%">表头2</th>
                                    <th>表头3</th>
                                </tr>
                             </thead>
                             <tbody>
                                <tr>
                                    <td>内容1</td>
                                    <td>超长超长超长内容2</td>
                                    <td>内容3</td>
                                </tr>
                                <tr>
                                    <td>内容1</td>
                                    <td>超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长内容2</td>
                                    <td>内容3</td>
                                </tr>
                                <tr>
                                    <td>内容1</td>
                                    <td>超长超长超长内容2</td>
                                    <td>内容3</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </dd>
            </dl>
        </div>
    </body>
</html>

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

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

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

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

到此这篇关于AmazeUI折叠式卡片布局,整合内容列表、表格组件实现的文章就介绍到这了,更多相关AmazeUI折叠式卡片布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木! 

HTML / CSS 相关文章推荐
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
HTML中link标签属性的具体用法
May 07 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 #HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 #HTML / CSS
amaze ui 的使用详细教程
Aug 19 #HTML / CSS
AmazeUI中模态框的实现
Aug 19 #HTML / CSS
Ratchet 模态框的实现
Aug 19 #HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 #HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 #HTML / CSS
You might like
对盗链说再见...
2006/10/09 PHP
php csv操作类代码
2009/12/14 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
php遍历CSV类实例
2015/04/14 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python实现自动发送邮件功能
2021/03/02 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
django和vue实现数据交互的方法
2019/08/21 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
python删除csv文件的行列
2021/04/06 Python
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android
table不让td文字溢出操作方法
2022/12/24 HTML / CSS