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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
小偷PHP+Html+缓存
2006/11/25 PHP
php 什么是PEAR?
2009/03/19 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php生成略缩图代码
2012/07/16 PHP
php解析json数据实例
2014/08/19 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python中zip和unzip数据的方法
2015/05/27 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
如何手工释放资源
2013/12/15 面试题
大学生个人简历自我评价
2013/11/16 职场文书
建筑人员岗位职责
2013/12/25 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
股东合作协议书范本
2014/04/14 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
追悼会悼词大全
2015/06/23 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书