`

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="max-width: 200px; margin-left: 200px;">
<!--响应式图片-->
<img src="img/xxx.jpg" class="am-img-responsive" alt=""/>
<!--圆角样式-->
<p>
  <img class="am-radius" alt="140*140" src="img/xxx.jpg" width="140" height="140" />
  <img class="am-round" alt="140*140" src="img/xxx.jpg" width="200" height="120"/>
  <img class="am-circle" src="img/xxx.jpg" width="140" height="140"/>
</p>
<!--边框-->
<img src="img/xxx.jpg" alt="..." class="am-img-thumbnail">
<img src="img/xxx.jpg" alt="..." class="am-img-thumbnail am-radius">
<img src="img/xxx.jpg" alt="..." class="am-img-thumbnail am-circle">
<!--[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>

 

效果图：

 

 

 


 

  • 大小: 399.1 KB
2
顶
1
踩
分享到：
| JQ 鼠标选中内容松开后弹窗
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AmazeUI 图片轮播

    AmazeUI 图片轮播是一款基于JavaScript和CSS3开发的高效、轻量级的图片展示组件，常用于网站中创建动态、吸引人的图片展示区域。它具有良好的浏览器兼容性，支持包括IE8在内的多种浏览器，使得它在各种环境下都能...

    简单实用的php+amazeui头像上传功能

    在头像上传场景中，AmazeUI可能提供了如按钮、表单、图片预览等元素，使用户能够在前端完成选择和预览头像的操作。 1. **前端部分**： - **文件输入控件**：HTML5的`&lt;input type="file"&gt;`元素用于让用户选择本地的...

    AmazeUI框架

    6. **admin-gallery.html**: 图片画廊组件，AmazeUI支持响应式的图片展示，适配不同设备屏幕，同时提供滑动浏览、缩放等交互功能，适用于展示产品或用户上传的图片。 7. **admin-user.html**: 用户管理页面，可能...

    基于AmazeUI的漂亮后台模板

    AmazeUI是一个开源的前端框架，专为移动优先的Web开发设计。这个“基于AmazeUI的漂亮后台模板”提供了一套完整的、适用于后台管理界面的设计方案，它结合了AmazeUI的核心特性，使得开发者能够快速构建出既美观又实用...

    AmazeUI模板

    AmazeUI是一款专为中国互联网设计的前端开发框架，它提供了丰富的组件和模板，适用于快速构建响应式、跨屏、高性能的网页应用。AmazeUI强调移动优先，支持多设备兼容，包括PC、手机和平板等，确保用户在不同平台上都...

    Amaze UI仿电脑版微信聊天界面HTML代码.zip

    Amaze UI 是一款基于Bootstrap框架并为中国开发者定制的开源前端框架，它提供了丰富的组件和样式，使得构建响应式、移动优先的网页变得更加便捷。在这个"Amaze UI仿电脑版微信聊天界面HTML代码.zip"压缩包中，我们...

    AmazeUI-2.2.1

    在这个文件里，AmazeUI可能展示了如何创建一个美观且响应式的图片库。 7. **blog.html**: 这个文件可能是博客模板的示例，展示了如何利用AmazeUI构建一个具有评论、分类、文章列表等功能的博客页面。 8. **admin-...

    基于 laravel5.2 PHP框架 + Amaze UI模板 + Ajax异步上传插件 + UEditor ，做的博客系统

    Amaze UI 是一款开源的、为中国开发者设计的前端框架，它集成了多种组件和模块，包括响应式布局、图标库、表单元素、导航菜单等，帮助开发者快速构建跨屏、多端的 Web 应用。在博客系统中，Amaze UI 提供了美观的...

    简单AmazeUI框架DEMO

    AmazeUI是一个轻量级、跨屏、模块化的前端框架，专为移动优先设计而打造。这个"简单AmazeUI框架DEMO"很可能是为了演示如何在实际项目中快速搭建响应式网页，以便在不同设备上提供一致的用户体验。下面我们将深入探讨...

    基于amazeui框架，设计的头像上传插件

    1.id="up-img-touch" 是触发弹出框的焦点 ... 点击图片上传" src="img/hu.jpg" data-am-popover="{content: '点击上传', trigger: 'hover focus'}" &gt; 2.url="/admin/user/upload.action" 提交给服务器的事件 1 ...

    AmazeUI-2.3.0

    6. `admin-gallery.html`：这可能是一个图片或资源展示的画廊，利用了AmazeUI的网格系统和响应式设计来适应不同的屏幕尺寸。 7. `blog.html`：一个博客布局的示例，展示了AmazeUI如何用于创建用户友好的内容发布...

    基于amazeui框架头像上传代码.zip

    3. **图片预览**：在用户选择图片后，为了提供更好的用户体验，AmazeUI可能有图片预览功能，让用户在上传前看到所选图片的效果。 4. **Ajax异步上传**：为了提高用户体验，头像上传通常使用Ajax技术，实现无刷新...

    AmazeUI 2.3离线文档.rar

    `assets` 文件夹可能存储了AmazeUI的静态资源，如图片、字体文件和其他媒体资源，这些都是构建用户界面时必不可少的元素。 `javascript` 文件夹包含了AmazeUI的JavaScript库和插件，这些文件提供了交互功能，如模态...

    基于amazeui头像上传

    例如，可以使用AmazeUI的`modal`组件来展示预览图片，或者使用`tooltip`来提示用户上传规则。 4. **图片预览**： 在选择文件后，可以使用AmazeUI的`img`组件预览图片。在`beforeUpload`回调中，可以读取文件内容并...

    Amaze UI 前台模板

    Amaze UI 是一款专为中国开发者设计的开源前端框架，它集成了丰富的组件和模块，能够帮助开发者快速构建响应式和跨设备的网页应用。这款前台模板以其美观的界面和高效的功能，深受开发者们的喜爱。"Amaze UI 前台...

    AmazeUI后台管理框架

    AmazeUI是一个强大的前端开发框架，专为构建高效、轻量级且响应式的网页应用而设计。这个框架的独特之处在于它的“Mobile first”理念，即优先考虑移动设备的用户体验，然后再扩展到桌面和其他大屏幕设备。这使得...

    amazeui 移动网站开发框架

    `admin-gallery.html`可能是关于图片或媒体管理的示例，使用AmazeUI的网格和媒体对象来展示内容。`admin-user.html`则可能涉及用户管理界面，包含用户信息展示、编辑和管理等功能。 `blog.html`是一个标准的博客...

    amazeui框架点击弹出头像上传代码

    6. **CSS样式**：AmazeUI的CSS文件负责提供界面样式，包括按钮、弹窗、图片预览区域等的布局和视觉效果。 7. **JavaScript交互**：js目录下的文件包含处理用户交互的脚本，例如处理文件选择事件、展示预览、发送...

    AmazeUI 缩略图

    在“AmazeUI 缩略图”这个主题中，我们主要探讨的是AmazeUI如何实现图片的缩略图展示，以及其在实际项目中的应用。 首先，AmazeUI的缩略图组件是基于HTML5的`&lt;figure&gt;`和`&lt;figcaption&gt;`元素设计的，它可以轻松创建...

Magicbox
Global site tag (gtag.js) - Google Analytics