AmazeUI 缩略图的实现示例


Posted in HTML / CSS onAugust 18, 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 style="margin: 10px;">
<!--结合网格使用-->
<div class="am-g">
 <div class="am-u-sm-4">
  <img class="am-thumbnail" src="img/bing.jpg" alt=""/>
 </div>
 <div class="am-u-sm-4">
  <a href="#" class="am-thumbnail">
   <img src="img/bing.jpg" alt=""/>
  </a>
 </div>
 <div class="am-u-sm-4">
  <figure class="am-thumbnail">
   <img src="img/bing.jpg" alt=""/>
  </figure>
 </div>
</div>
<!--结合 AVG Grid 使用-->
<ul class="am-avg-sm-3 am-thumbnails">
 <li>
  <img class="am-thumbnail" src="img/bing.jpg" alt=""/>
 </li>
 <li>
  <a href="#" class="am-thumbnail">
   <img src="img/bing.jpg" alt=""/>
  </a>
 </li>
 <li>
  <figure class="am-thumbnail">
   <img src="img/bing.jpg" alt=""/>
  </figure>
 </li>
</ul>
<!--标题-->
<div class="am-g">
 <div class="am-u-sm-4">
  <div class="am-thumbnail">
   <img src="img/bing.jpg" alt=""/>
   <h3 class="am-thumbnail-caption">图片标题 #1</h3>
  </div>
 </div>
 <div class="am-u-sm-4">
  <a href="#" class="am-thumbnail">
   <img src="img/bing.jpg" alt=""/>
   <figcaption class="am-thumbnail-caption">图片标题 #2</figcaption>
  </a>
 </div>
 <div class="am-u-sm-4">
  <figure class="am-thumbnail">
   <img src="img/bing.jpg" alt=""/>
   <figcaption class="am-thumbnail-caption">图片标题 #3</figcaption>
  </figure>
 </div>
</div>
<!--图文混排-->
<div class="am-g">
 <div class="am-u-sm-6">
  <div class="am-thumbnail">
   <img src="img/bing.jpg" alt=""/>
   <div class="am-thumbnail-caption">
    <h3>图片标题</h3>
    <p>阅谁问君诵,水落清香浮。阅谁问君诵,水落清香浮。阅谁问君诵,水落清香浮。</p>
    <p>
     <button class="am-btn am-btn-primary">按钮</button>
     <button class="am-btn am-btn-default">按钮</button>
    </p>
   </div>
  </div>
 </div>
 <div class="am-u-sm-6">
  <div class="am-thumbnail">
   <img src="img/bing.jpg" alt=""/>
   <div class="am-thumbnail-caption">
    <h3>图片标题</h3>
    <p>阅谁问君诵,水落清香浮。阅谁问君诵,水落清香浮。阅谁问君诵,水落清香浮。</p>
    <p>
     <button class="am-btn am-btn-primary">按钮</button>
     <button class="am-btn am-btn-default">按钮</button>
    </p>
   </div>
  </div>
 </div>
</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 选择器 基本选择器介绍
Jan 21 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 #HTML / CSS
amazeui时间组件的实现示例
Aug 18 #HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 #HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 #HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 #HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 #HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 #HTML / CSS
You might like
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php数组指针操作详解
2017/02/14 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python的几种主动结束程序方式
2019/11/22 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
天巡全球:Skyscanner Global
2017/06/20 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
一套Delphi的笔试题二
2013/05/11 面试题
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
工程承包协议书
2014/10/20 职场文书
端午节寄语2015
2015/03/23 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android