amazeui学习笔记--css(HTML元素4)--图片image

一、总结

1、响应式图片:随着页面宽度而变化 .am-img-responsive class。 <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" class="am-img-responsive" alt=""/>

2、圆角椭圆圆形样式和button里面一样:am-radius     am-round    am-circle

3、边框:am-image-thumbnail,边框倒是加上了img模块名,因为可能不同标签的边框不同  <img src="..." alt="..." class="am-img-thumbnail am-circle">

二、图片image

定义图片样式。

基础样式

基础样式定义在 base 中。

 Copy
img {
box-sizing: border-box;
/* v2.3 开始移除以下代码,详见 #502 */
/* max-width: 100%;
height: auto;*/
vertical-align: middle;
border: 0;
}

响应式图片

如上面的代码所示, base 里已经设置了 max-width: 100%,图片会自动适应到容器的宽度(但不会超过图片原始宽度),不需要添加额外的 class(演示)。如果要让图片始终和容器一样宽,需要设置 width: 100%

v2.3 为解决 #502,基础样式中取消了图片最大宽度设置,新增了 .am-img-responsive class。

 Copy
<img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" class="am-img-responsive" alt=""/>

增强样式

圆角样式

<img>元素设置不同的 class,增强其样式。

  • .am-radius 圆角
  • .am-round 椭圆
  • .am-circle 圆形,一般用于正方形的图片(你要觉得椭圆好看,用在长方形上也可以)
 Copy

  

<p>
<img class="am-radius" alt="140*140" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/1000/h/1000/q/80" width="140" height="140" /> <img class="am-round" alt="140*140" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/1000/h/600/q/80" width="200" height="120"/> <img class="am-circle" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/1000/h/1000/q/80" width="140" height="140"/>
</p>

边框

  • .am-img-thumbnail 边框
 Copy
  
<img src="..." alt="..." class="am-img-thumbnail">
<img src="..." alt="..." class="am-img-thumbnail am-radius">
<img src="..." alt="..." class="am-img-thumbnail am-circle">

amazeui学习笔记--css(HTML元素4)--图片image的更多相关文章

  1. amazeui学习笔记--css(HTML元素5)--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  2. amazeui学习笔记--css(HTML元素3)--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

  3. amazeui学习笔记--css(HTML元素2)--代码Code

    amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...

  4. amazeui学习笔记--css(HTML元素1)--按钮Button

    amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...

  5. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  6. amazeui学习笔记--css(布局相关3)--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  7. amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  8. amazeui学习笔记--css(布局相关1)--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  9. amazeui学习笔记--css(基本样式2)--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

随机推荐

  1. Android学习总结(2)——App客户端与服务器交互中的token

    学习Token Token是什么? Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Tok ...

  2. iOS 开发之IPad的设计与实现

    // // main.m // 6-ipad // #import <Foundation/Foundation.h> #import "Ipad.h" int mai ...

  3. 什么是PV和UV?

    技术角度 1个PV是指从浏览器发出一个对网络server的Request,网络server接到Request之后.会開始把该Request相应的一个Page(Page就是一个网页)发送到client的 ...

  4. 在vim中配置python补全,fedora 19

    近期发现python是个不错的语言,值得一学,先配置下环境,让vim具有keyword补全功能,步骤例如以下,我这个是fedora,其它发行版类似 $ su ******** # yum instal ...

  5. OcadeToolkit - From 2D CAD to PDMS

    OcadeToolkit - From 2D CAD to PDMS eryar@163.com Abstract. 基于开源二维CAD软件QCAD开发的插件可以将DXF文件中直线.圆弧转换到PDMS ...

  6. AVEVA PDMS 三维文字工具

    AVEVA PDMS 三维文字工具 eryar@163.com 网上有个文字工具插件,可以在PDMS中创建三维的字母和数字,且字体样式只有一种,其下载地址为:http://www.plantcon.d ...

  7. amaze ui使用简介

    amaze ui使用简介 amaze UI 类似于bootstrap 不过比bootstrap更加轻量级 可以用来开发响应式网站,并且是移动优先的,针对移动设备开发的网站可以考虑使用这个框架 css中 ...

  8. 71.用express框架,出现 express.Router is not a function

    Express版本太久

  9. SpringMVC-@RequestMapping的参数和用法

    RequestMapping里面的注解包含的参数如图: RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. ...

  10. hostname---显示和设置系统的主机

    hostname命令用于显示和设置系统的主机名称.环境变量HOSTNAME也保存了当前的主机名.在使用hostname命令设置主机名后,系统并不会永久保存新的主机名,重新启动机器之后还是原来的主机名. ...