AmazeUI 列表的实现示例


Posted in HTML / CSS onAugust 17, 2020

最近在学习AmazeUI 框架的一些用法,本文主要介绍了AmazeUI 列表,分享给大家,也给自己留个笔记

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin: 10px;">
<!--链接列表-->
<ul class="am-list">
	<li><a href="#">链接列表</a></li>
	<li><a href="#">链接列表</a></li>
</ul>
<!--文字超出截断为「...」-->
<ul class="am-list">
	<li><a href="#" class="am-text-truncate">文字超出截断文字超出截断文字超出截断文字超出截断</a></li>
</ul>
<!--纯文字列表-->
<ul class="am-list am-list-static">
	<li><a href="#">纯文字列表</a></li>
	<li><a href="#">纯文字列表</a></li>
</ul>
<!--列表边框-->
<ul class="am-list am-list-static am-list-border">
	<li><a href="#">列表边框</a></li>
	<li><a href="#">列表边框</a></li>
</ul>
<ul class="am-list am-list-border">
	<li><a href="#">列表边框</a></li>
	<li><a href="#">列表边框</a></li>
</ul>
<!--斑马纹-->
<ul class="am-list am-list-static am-list-border am-list-striped">
	<li><a href="#">斑马纹</a></li>
	<li><a href="#">斑马纹</a></li>
</ul>
<!--组合使用-->
<ul class="am-list am-list-static am-list-border">
	<li>
		<span class="am-badge am-badge-success">YES</span>
		<span class="am-badge am-badge-danger">NO</span>
		组合使用
	</li>
</ul>
<!--添加 ICON-->
<ul class="am-list am-list-static am-list-border">
	<li><i class="am-icon-home am-icon-fw"></i>添加 ICON-</li>
	<li><i class="am-icon-book am-icon-fw"></i>添加 ICON-</li>
	<li><i class="am-icon-pencil am-icon-fw"></i>添加 ICON-</li>
</ul>
<ul class="am-list am-list-border">
	<li><a href="#"><i class="am-icon-home am-icon-fw"></i>添加 ICON-</a></li>
	<li><a href="#"> <i class="am-icon-book am-icon-fw"></i>添加 ICON-</a></li>
	<li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>添加 ICON-</a></li>
</ul>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

效果图:

AmazeUI 列表的实现示例

到此这篇关于AmazeUI 列表的实现示例的文章就介绍到这了,更多相关AmazeUI 列表内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 #HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 #HTML / CSS
AmazeUI导航的示例代码
Aug 14 #HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 #HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 #HTML / CSS
AmazeUI 图标的示例代码
Aug 13 #HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 #HTML / CSS
You might like
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
js倒计时抢购实例
2015/12/20 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
家长对孩子的评语
2014/04/18 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
医生个人年终总结
2015/02/28 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android