AmazeUI基本样式
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基本样式的更多相关文章
- 后端不会写页面怎么办?推荐几个好用的前端UI模板、组件对比
前言 下面推荐并对比几个好用的前端UI模板 推荐给以下的人使用: 1.不想重复造轮子的后端 2.不想学bootstrap的后端 3.后端开发想自己写简单页面的 4.偷懒的前端 本文注重手机端,对web ...
- learn
1.JQ (随时) 2.微信小程序(关注群,专栏知乎,自己申请一个小程序弄个实战) 3.支付宝小程序(2017.08.18 新生代 类似微信api) 4.vue(优秀的mvvm框架,手机端主流) 5. ...
- amaze ui和bootstrap有哪些差别?
amaze ui和bootstrap有哪些差别? 问题 我最近在学amaze ui,感觉如果单从功能性来看和bootstrap最大差别也就是扁平化,不过妹子ui号称对国产本土化支持更好,这个具体表现在 ...
- amazeui学习笔记--css(基本样式4)--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(基本样式2)--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- AmazeUI 框架知识点-布局和样式整理
1.Amaze UI 将所有元素的盒模型设置为 border-box.这下好了,妈妈再也不用担心没计算好 padding.border 而使布局破相了. 2.Amaze UI 将浏览器的基准字号设置为 ...
- 网页样式——各种炫酷效果持续更新ing...
1.evanyou效果-彩带的实现,效果如下 注:这个主要用的是Canvas画布实现的,点击背景绘制新的图形,代码如下: /*Html代码:*/ <canvas id=">< ...
随机推荐
- JS禁止右键
function cancelMouse(){return false;}document.oncontextmenu = cancelMouse;
- wait(), notify(),sleep详解
在JAVA中,是没有类似于PV操作.进程互斥等相关的方法的.JAVA的进程同步是通过synchronized()来实现的,需要说明的是,JAVA的synchronized()方法类似于操作系统概念中的 ...
- BZOJ1029: [JSOI2007]建筑抢修(贪心)
题目链接:BZOJ1029: [JSOI2007]建筑抢修 题解:贪心思想,按结束时间从小到大排序,选花费时间尽量短的建筑维修,用堆维护. #include<stdio.h> #inclu ...
- Struts2 用 s:if test 判断String类型的对象属性值和单字符是否相等的问题
Struts2 用 s:if test 判断String类型的对象属性值和单字符是否相等的问题 首先,这里所指的单字符形如:Y,男. 有两种做法: a. <s:if test='news.s ...
- 20145236 《Java程序设计》实验五实验报告
20145236 实验五 Java网络编程 实验内容 1.运行TCP代码,结对进行,一人服务器,一人客户端: 2.利用加解密代码包,编译运行代码,一人加密,一人解密: 3.集成代码,一人加密后通过TC ...
- Struts2动态结果(${})and全局结果(global-results)
动态结果 例:根据判定动态结果区分用户进行登录 1.先在TestAction类中进行判定赋值 public class TestAction extends ActionSupport { priva ...
- SQL语句创建数据库,SQL语句删除数据库,SQL语句创建表,SQL语句删除表,SQL语句添加约束,SQL语句删除约束
创建数据库: CREATE DATABASE Test --要创建的数据库名称 ON PRIMARY ( --数据库文件的具体描述 NAME='Test_data', --主数据文件的逻辑名称 FIL ...
- SAP销售订单状态修改(审核) 计划行自动产生需求,产生MD04需求
不知道业务怎么配置的,创建销售单时,一堆计划行类别,什么CN,DN...都有,但是审核后需要计划行变更为CP,这样在MD04才能看到需求. 原有逻辑是弄个后台程序,审核后调一下,更新一下计划行,这样是 ...
- 从问题域出发认识Hadoop生态系统
近些年来Hadoop生态系统发展迅猛,它本身包含的软件越来越多,同时带动了周边系统的繁荣发展.尤其是在分布式计算这一领域,系统繁多纷杂,时不时冒出一个系统,号称自己比MapReduce或者Hive高效 ...
- 对Docker的价值和应用场景分析
近年来,Docker在IT界可谓风光十足,各大技术论坛上赚足了眼球,公司内外也有相当多的介绍和尝试,看上去如此高大上的技术,貌似会给云.服务部署.运维等领域带来颠覆性的创新. 近期查阅了一些文档,较深 ...