AmazeUI是一个轻量级、Mobile first的前端框架,基于开源社区流行的前端框架编写。

  

  Normalize

 AmazeUI使用了normalize.css,但做了些调整:html添加了-webkit-font-smoothing:antialiased;<hgroup>从w3c标准中移出;<img>设置最大宽度为100%;<figure>外边距设置为0;<textarea>添加vertical-align:top;resize:vertical;移除<dfn>斜体字样式;移出<h1>样式

  CSS盒模型

 AmazeUI将所有元素的盒模型设置为border-box。

 box-sizing:content-box; width:100px;padding:20px;border:20px;margin:20px;

 box-sizing:border-box;width:140px;padding:20px;border:20px;margin:20px;(The border and padding inside of the width)

 AmazeUI将浏览器的基准字号设置为62.5%,即10px。1rem=10px。在body上应用了font-size:1.6rem,即将页面字号设置为16px。yuem根据上下文变化不同,rem只跟基准设置关联,只要修改基准字号,所有使用rem作为单位的设置都会相应改变。

  字体

 AmazeUI主要使用非衬线字体(sans-serif),在<code>、<pre>等元素上设置了等宽字体(monospace)。  

 字体定义 body{

font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;

}

 Segoe UI:Windows UI字体。

 Helvetica Neue:IOS7及OSX 10.10 UI字体。

 FreeSans:包括Ubuntu之类的Linux分发版包含的字体。

 在AmazeUI的实践中,font-family设置只在base样式中出现了一两次。在具体项目中,不建议到处设置font-family。但AmazeUI还是提供了设置字体的辅助class。

 .am-sans-serif:非衬线字体

 .am-serif:衬线字体,中文显示宋体

 .am-kai:数字英文显示衬线字体,中文显示楷体

 .am-monospace:等宽字体

 在Webkit浏览器下还设置了反锯齿平滑渲染,渲染出来要纤细一些。

 OSX平台的Firefox从v25增加了-moz-osx-font-smoothing,实行了类似Webkit的字体渲染效果。

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
 也可以设置成浏览器的默认平滑字体。 

  body {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    }

  

  元素基本样式

 <h1>-<h6>保持粗体,设置了边距。<h1>为正常字体号的1.5倍;<h2>为正常字体号的1.25倍;其他保持正常字号、

 段落<p>   分割线<hr>   代码快<pre>  列表<ul><li></li></ul>  有序列表<ol><li></li></ol>

 引用<blockquote>(作者一般放在<small>元素里)

 <blockquote>    

  <p>无论走到哪里,都应该记住,过去都是假的,回忆是一条没有尽头的路,一切以往的春天都不复存在,就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>
  <small>马尔克斯 ——《百年孤独》</small>

 </blockquote>

 定义列表<dl><dt><dd></dt></dd></dl>

 表格<table><caption></caption><thead><tr><td></td></tr></thead></table>

 图片<img class="" src=" alt="" />

 超链接<a>  粗体<strong>  行内代码<code> 删除线<del>  背景变黄<ins>

  

  

  显示URL链接

 利用css3content属性,将<a>和<abbr>的标题、链接显示在后面。

 <a herf="www.baidu.com">百度</a>

 <abbr title="www.baidu.com">百度</abbr>

 辅助class:am-print-hide浏览器可见,打印机隐藏    am-print-block、am-print-inline-block、am-print-inline打印机可见,浏览器不可见。

 

AmazeUI基本样式的更多相关文章

  1. 后端不会写页面怎么办?推荐几个好用的前端UI模板、组件对比

    前言 下面推荐并对比几个好用的前端UI模板 推荐给以下的人使用: 1.不想重复造轮子的后端 2.不想学bootstrap的后端 3.后端开发想自己写简单页面的 4.偷懒的前端 本文注重手机端,对web ...

  2. learn

    1.JQ (随时) 2.微信小程序(关注群,专栏知乎,自己申请一个小程序弄个实战) 3.支付宝小程序(2017.08.18 新生代 类似微信api) 4.vue(优秀的mvvm框架,手机端主流) 5. ...

  3. amaze ui和bootstrap有哪些差别?

    amaze ui和bootstrap有哪些差别? 问题 我最近在学amaze ui,感觉如果单从功能性来看和bootstrap最大差别也就是扁平化,不过妹子ui号称对国产本土化支持更好,这个具体表现在 ...

  4. amazeui学习笔记--css(基本样式4)--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

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

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

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

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

  7. amazeui学习笔记--css(基本样式)--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

  8. AmazeUI 框架知识点-布局和样式整理

    1.Amaze UI 将所有元素的盒模型设置为 border-box.这下好了,妈妈再也不用担心没计算好 padding.border 而使布局破相了. 2.Amaze UI 将浏览器的基准字号设置为 ...

  9. 网页样式——各种炫酷效果持续更新ing...

    1.evanyou效果-彩带的实现,效果如下 注:这个主要用的是Canvas画布实现的,点击背景绘制新的图形,代码如下: /*Html代码:*/ <canvas id=">< ...

随机推荐

  1. poj1258 Agri-Net (prim+heap)

    题目链接:poj1258 Agri-Net 这题我上个月做过,是个大水题,今天看见有人用prim+heap做的,就学习了下. #include<cstdio> #include<cs ...

  2. 三级菜单---zhufeng

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  3. uva 12657(双向链表)

    一定要注意swap(x, y),x, y可能相邻! #include <cstdio> #define N 100005 #define ll long long int n, m; st ...

  4. group_concat函数与find_in_set()函数相结合

    一:group_concat函数详解 1.语法如下: group_concat([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator '分隔符'] ...

  5. bat产生随机数并复制文件及生成文件列表

    有这样一个场景:我需要将同一个文件复制为上千个文件,并且文件名应为随机数.为了简单起见,不想写程序,直接写个BAT来,方便,简单,易用: 1. 搞定用BAT产生32位随机数,存为变量并使用,保存以下代 ...

  6. 在vim中执行外部命令

    11.7.5  在Vim编辑器中执行Shell命令 有时需要在Vim编辑器中执行Shell命令,例如需要验证一个Shell命令是否正确,以便写入脚本中:需要在文件中引用某个Shell命令的输入等.本小 ...

  7. Gramar

    一.And 并列关系(and) in addition / and / similarly / likewise / as well as / besides / furthermore / also ...

  8. qml ios长按晃动

    WidgetModel.qml import QtQuick 1.0 ListModel { ListElement { icon: "Images/widget1.png"; g ...

  9. 存储过程Oracle(一)

    一.简介 存储过程:就是在数据库中创建的一段程序,供别人调用 .其实我感觉跟定义一个方法相似 二.无参存储过程 如下,经典的输出"Hello World"来入门存储过程 创建一个存 ...

  10. 使用ASP.Net WebAPI构建REST服务(五)——客户端

    WebAPI是标准的Http协议,支持Http协议的客户端(如浏览器)都可以访问.但是,有的时候我们如果想在自己的程序中使用WebAPI时,此时就要实现自己的客户端了.我之前介绍过在.Net 4.5中 ...