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 clip-path 用法介绍详解
Mar 01 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 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 cookie 登录验证示例代码
2009/03/16 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
Node.js用readline模块实现输入输出
2016/12/16 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python manage.py runserver流程解析
2019/11/08 Python
python 有效的括号的实现代码示例
2019/11/11 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
论文诚信承诺书
2014/05/23 职场文书
财务会计实训报告
2014/11/05 职场文书
关于感谢信的范文
2015/01/23 职场文书
主持人开幕词
2015/01/29 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
管辖权异议上诉状
2015/05/23 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
frg-100简单操作(设置)说明
2022/04/05 无线电