AmazeUI 等分网格的实现示例


Posted in HTML / CSS onAugust 25, 2020

本文主要介绍了 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>
<div class="am-container">
  <ul class="am-avg-sm-4 am-thumbnails">
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li>
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li>
  </ul>
  <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li>
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li>
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li>
    <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li>
  </ul>
</div>
<!--[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弹性伸缩布局之box布局
Jul 12 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 #HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 #HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 #HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 #HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 #HTML / CSS
Canvas波浪花环的示例代码
Aug 21 #HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 #HTML / CSS
You might like
十天学会php之第八天
2006/10/09 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
解决laravel session失效的问题
2019/10/14 PHP
使用Apache的rewrite
2021/03/09 Servers
让元素在网页中可拖动示例代码
2013/08/13 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
python中使用序列的方法
2015/08/03 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
django解决跨域请求的问题
2018/11/11 Python
python config文件的读写操作示例
2019/09/27 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Python多分支if语句的使用
2020/09/03 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
在Python中实现字典反转案例
2020/12/05 Python
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
遇到的Mysql的面试题
2014/06/29 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
2015年护士节活动总结
2015/02/10 职场文书
2015年药房工作总结
2015/04/25 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电