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 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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 注释规范
2012/03/29 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
python实现电子产品商店
2019/02/26 Python
python绘制规则网络图形实例
2019/12/09 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
航空大学应届生求职信
2013/11/10 职场文书
投资合作协议书
2014/04/17 职场文书
师德师风个人反思
2014/04/28 职场文书
生活小常识广播稿
2014/09/16 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
政风行风评议心得体会
2014/10/21 职场文书