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 相关文章推荐
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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服务端图片生成缩略图的方法详解
2013/06/20 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
javascript cookies操作集合
2010/04/12 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
python修改文件内容的3种方法详解
2019/11/15 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python调用Redis的示例代码
2020/11/24 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
战友聚会邀请函
2014/01/18 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书