AntUI卡片Cards
时间:2022-07-26
本文章向大家介绍AntUI卡片Cards,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
无图标卡片
<div class="am-card">
<div class="am-card-header">无图标卡片</div>
<div class="am-card-item am-card-minfo am-card-noicon">
<div class="am-card-content">
<div class="am-card-title">卡片标题</div>
<div class="am-card-subtitle">副标题非必填</div>
</div>
<div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
</div>
<div class="am-card-item am-card-minfo am-card-noicon">
<div class="am-card-content">
<div class="am-card-title">卡片标题</div>
<div class="am-card-subtitle">副标题非必填</div>
</div>
<div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
</div>
</div>
带图标卡片
<div class="am-card">
<div class="am-card-header">带图标卡片</div>
<div class="am-card-body">
<div class="am-card-item am-card-minfo">
<div class="am-card-thumb">
<img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
</div>
<div class="am-card-content">
<div class="am-card-subtitle">手工水饺</div>
<div class="am-card-title">100元代金券</div>
</div>
<div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
</div>
<div class="am-card-item am-card-minfo">
<div class="am-card-thumb">
<img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
</div>
<div class="am-card-content">
<div class="am-card-subtitle">手工水饺</div>
<div class="am-card-title">100元代金券</div>
</div>
<div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
</div>
</div>
</div>
带图和描述文字卡片
<div class="am-card">
<div class="am-card-header">带图和描述文字卡片样式</div>
<div class="am-card-body">
<div class="am-card-item">
<div class="am-card-minfo">
<div class="am-card-thumb">
<img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
</div>
<div class="am-card-content">
<div class="am-card-title">100元代金券</div>
<div class="am-card-subtitle">手工水饺</div>
</div>
<div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
</div>
<div class="am-card-footnote">
<img src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png" />
描述文字
</div>
</div>
<div class="am-card-item">
<div class="am-card-minfo">
<div class="am-card-thumb">
<img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
</div>
<div class="am-card-content">
<div class="am-card-title">100元代金券</div>
<div class="am-card-subtitle">手工水饺</div>
</div>
<div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
</div>
<div class="am-card-footnote">
<img src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png" />
描述文字
</div>
</div>
</div>
</div>
- java学习:数据增删改查、存储过程调用及事务处理
- 极客手工:自制51四驱无线遥控小车
- flash:二次贝塞尔曲线应用-生成飞机路径示意图
- 微信小程序重磅功能上线!一键连Wi-Fi/手机变门禁卡
- MySQL下载安装、基本配置、问题处理
- windows下命令行模式中cd命令无效的原因
- 分布式和集群区别?什么是云计算平台?分布式的应用场景?
- 中国移动也要搞自动驾驶,没了SIM卡怎么耍花样?
- python并发编程之多进程理论部分
- 使用concurrent.futures模块并发,实现进程池、线程池
- 人工智能与医疗
- 每周论文清单:知识图谱,文本匹配,图像翻译,视频对象分割
- 进程池、线程池、回调函数
- java学习:weblogic下JNDI及JDBC连接测试(weblogic环境)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法