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用@font-face实现自定义英文字体
Sep 23 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
css背景和边框标签实例详解
May 21 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设计模式 php实现原型模式(prototype)
2015/12/07 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
js 通用订单代码
2013/12/23 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
python实现图片批量剪切示例
2014/03/25 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
python中Apriori算法实现讲解
2017/12/10 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
北承题目(C++)
2012/05/16 面试题
应用心理学个人求职信范文
2013/12/11 职场文书
电大本科自我鉴定
2014/02/05 职场文书
前处理组长岗位职责
2014/03/01 职场文书
租赁协议书
2015/01/27 职场文书
中学教师个人总结
2015/02/10 职场文书
自我评价优缺点范文
2015/03/11 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis