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实现图片无间断轮播效果
Aug 25 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
利用js调用后台php进行数据处理原码
2006/10/09 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
php跨站攻击实例分析
2014/10/28 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python机器学习之决策树算法
2017/12/22 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
YII2 全局异常处理深入讲解
2021/03/24 PHP
大学毕业生工作的自我评价
2013/10/01 职场文书
求职简历的自我评价怎样写好
2013/10/07 职场文书
学生档案自我鉴定
2013/10/07 职场文书
校长就职演讲稿
2014/01/06 职场文书
初三班主任寄语大全
2014/04/04 职场文书
岗位说明书范文
2014/05/07 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL