`

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>	

 

效果图:

 

 

  • 大小: 151 KB
分享到:
评论

相关推荐

    AmazeUI 缩略图的实现示例

    本文主要介绍了AmazeUI 缩略图的实现示例,分享给大家,顺便给自己留个笔记,下面就一起来了解一下 &lt;!doctype html&gt; &lt;html class=no-js&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;meta ...

    图片缩略图展示图片缩略图展示图片缩略图展示

    图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示图片缩略图展示

    cr2缩略图补丁工具

    佳能CR2补丁官方版是佳能系列打造的cr2缩略图补丁工具,帮你像预览JPG图像那样轻松,兼容大部分佳能相机,在电脑上直接预览cr2缩略图,不需要打开即可预览。 相机格式中有一个扩展名为.CR2,在日常摄影底片管理中...

    上传图片并生成高清晰缩略图

    上传图片并生成高清晰缩略图 Asp.Net 上传图片并生成高清晰缩略图收藏 在asp.net中,上传图片功能或者是常用的,生成缩略图也是常用的。baidu或者google,c#的方法也是很多的,但是一用却发现缩略图不清晰啊,缩略...

    win10完美PSD和AI缩略图补丁

    我是设计师,旧版本的缩略图一直很好找,但换win10系统后一直找到的缩略图补丁都各种问题,这回终于找到了,亲测一键使用,打开软件会听到一直播放很LOW的音乐,点击下方【开启】立马显示缩略图,重启什么的根本不...

    pdf生成缩略图

    pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图pdf生成缩略图

    CDR缩略图补丁2018

    缩略图补丁提取自coreldraw 2018版,亲测可以解决CDR缩略图无法显示的问题。不管你正在用的CDR是什么版本,安装最新版缩略图补丁就对了。

    MysticThumbs218_x64psd缩略图补丁 ps psd缩略图补丁

    ps psd缩略图补丁 完美显示 ps psd缩略图补丁 完美显示 ps psd缩略图补丁 完美显示 ps psd缩略图补丁 完美显示 ps psd缩略图补丁 完美显示 ps psd缩略图补丁 完美显示 ps psd缩略图补丁 完美显示 ps psd缩略图补丁 ...

    3d缩略图3d缩略图

    3d缩略图3d缩略图3d缩略图3d缩略图3d缩略图3d缩略图3d缩略图3d缩略图3d缩略图3d缩略图3d缩略图

    java 上传图片生成缩略图

    java 上传图片时生成对应的缩略图,缩略图的大小可手动更改,代码中有详细注释

    QGis+qt实现缩略图工程源码,没有运行环境,需自己配置运行环境

    QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码...

    asp.net绝对完美的生成缩略图的类(多种模式生成)

    * zoomImage.MakeZoomImage(原文件名, 缩略图文件名, 缩略图宽,缩略图高 , 模式); * 如:zoomImage.MakeZoomImage(Server.MapPath("~/uploads/") + bigFilename, Server.MapPath("~/uploads/") + smallFileName1,...

    CorelDRAW缩略图补丁2020

    CorelDRAW缩略图补丁2020版,CorelDRAW 缩略图补丁主要用于解决电脑中cdr格式的文件不显示缩略图的问题,支持32位和64位版本,安装后不需要打开coreldraw就可以看到cdr的预览图了,对于设计师来说特别实用。

    动态缩略图实现方案

    动态缩略图实现方案,java实现动态缩略图

    易语言简单缩略图浏览器

    易语言简单缩略图浏览器源码,简单缩略图浏览器,开启图片组扩展功能,关闭图片组扩展功能,取图像缩略图,A2W,GdiplusStartup,GdiplusShutdown,GdipLoadImageFromFile,GdipDisposeImage,MultiByteToWideChar,...

    在Win7 64位系统下完美显示PSD缩略图补丁AI PSD INDD缩略图补丁

    在Win7 64位系统下完美显示PSD缩略图补丁AI PSD INDD缩略图补丁

    ai psd缩略图补丁

    对于设计人员非常有用的PS与AI缩略图补丁,安装完后选择“缩略图”的查看方式,便能方便地看到绘图文件的大概内容,从而节省您的宝贵时间。

    易语言简单缩略图

    易语言简单缩略图源码,简单缩略图,开启图片组扩展功能,关闭图片组扩展功能,取图像缩略图,A2W,GdiplusStartup,GdiplusShutdown,GdipLoadImageFromFile,GdipDisposeImage,MultiByteToWideChar,GdipGetImageThumbnail,...

    rhino缩略图查看工具

    rhino缩略图查看工具非常的好用 希望大家需要

Global site tag (gtag.js) - Google Analytics