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 Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
css display table 自适应高度、宽度问题的解决
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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
20个PHP常用类库小结
2011/09/11 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
租房协议书怎么写
2014/04/10 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
公司任命书模板
2014/06/06 职场文书
干部考核工作总结2015
2015/07/24 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python