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 相关文章推荐
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 HTML / CSS
CSS实现鼠标悬浮动画特效
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
php预定义变量使用帮助(带实例)
2013/10/30 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
网页常用特效代码整理
2006/06/23 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
原生js实现购物车功能
2020/09/23 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
Python2中文处理纪要的实现方法
2018/03/10 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
养殖行业的创业计划书
2014/01/05 职场文书
工作过失检讨书
2014/02/23 职场文书
保护环境建议书
2014/03/12 职场文书
网络宣传方案
2014/03/15 职场文书
拉歌口号大全
2014/06/13 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书