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 clip-path 用法介绍详解
Mar 01 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
HTML常用标签超详细整理
Mar 19 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
PHP面向对象分析设计的经验原则
2008/09/20 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
VUE实现密码验证与提示功能
2019/10/18 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python 类的继承实例详解
2017/03/25 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python打开文件的方式有哪些
2020/06/29 Python
教师推荐信范文
2013/11/24 职场文书
园林毕业生自我鉴定范文
2013/12/29 职场文书
广告业务员岗位职责
2014/02/06 职场文书
求职毕业生自荐书
2014/02/08 职场文书
客户接待方案
2014/02/26 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
高级工程师英文求职信
2014/03/19 职场文书
中学教师师德承诺书
2014/05/23 职场文书
导游欢迎词范文
2015/01/23 职场文书
pandas数值排序的实现实例
2021/07/25 Python
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技