AmazeUI 缩略图的实现示例
导读:收集整理的这篇文章主要介绍了AmazeUI 缩略图的实现示例,觉得挺不错的,现在分享给大家,也给大家做个参考。 本文主要介绍了amazeUI 缩略图的实现示例,分享给大家,顺便给自己留个笔记,下面就一起来了解一下<!doct...
收集整理的这篇文章主要介绍了AmazeUI 缩略图的实现示例,觉得挺不错的,现在分享给大家,也给大家做个参考。 本文主要介绍了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 缩略图内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: AmazeUI 缩略图的实现示例
本文地址: https://pptw.com/jishu/586210.html