文档章节

AmazeUI基本样式

开源中国小卖部店员
 开源中国小卖部店员
发布于 2016/10/26 15:39
字数 758
阅读 40
收藏 0

 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 HTML元素
下一篇: AmazeUI布局
开源中国小卖部店员
粉丝 18
博文 52
码字总数 15073
作品 0
苏州
后端工程师
私信 提问
中国首个开源HTML5 跨屏前端框架Amaze UI

云适配,这是一家能以一行代码将你的网站移动化,实现网址不变且内容实时自动同步的服务提供商。云适配所采用的技术是一项基于云计算、利用html5进行网站跨屏适配,它为目标网站开发一行JS代...

panpanhtai
2014/06/26
18
0
Amaze UI 定制化工具上线丨打造专属于你的“妹子UI”

“你们的离线包太大了,能不能精简一下,或者提供在线定制?” “能不能改改颜色!!能不能!!!” “你说说你们,提供那么多我用不到的插件干啥?” 收到,收到!你们的意见,我们一直在聆...

云适配
2016/11/10
821
4
bingoJS 2.x | AmazeUI 后台 SPA 管理框架

AmazeUI - admin 基于AmazeUI - admin 模板。 bingoJS 2.x 使用bingoJS 2.x 前端MV开始。 demo 在线demo PS:基于 AmazeUI(amdin) + bingoJS 2.x 实现模块化单页面(SPA)快速开发后台管理框架...

front-Y
2016/08/01
1K
0
极速开发网站CMS后台管理系统框架

该cms后台管理网站模版,能够适应电脑和手机两种设备,采用自适应进行设计。同时页面的操作采用的是iframe进行框架的搭建,能够动态无刷新的进行页面切换,可以存在多个tab页面进行切换,框架...

半张一块
2016/10/09
18
1
开发时间缩短90% Amaze UI助H5梦工场响应式网站快速上线

近日,HTML5梦工场使用云适配开源HTML5跨屏前端框架Amaze UI对自身网站进行了重新开发。开发完成的新网站,用户无论通过任何终端访问,网站内容都能保持实时同步,并能以最佳的展现方式呈现出...

云适配
2016/05/17
3
0

没有更多内容

加载失败,请刷新页面

加载更多

MySQL8.0.17 - Multi-Valued Indexes 简述

本文主要简单介绍下8.0.17新引入的功能multi-valued index, 顾名思义,索引上对于同一个Primary key, 可以建立多个二级索引项,实际上已经对array类型的基础功能做了支持 (感觉官方未来一定...

阿里云官方博客
24分钟前
3
0
make4.1降级 make-3.81、2错误

在编译 make-3.82 的时候出现如下错误提示 glob/glob.c:xxx: undefined reference to `__alloca'` 修改 /glob/glob.c // #if !defined __alloca && !defined __GNU_LIBRARY__ # ifdef __GNUC......

Domineering
25分钟前
2
0
Rainbond集群的安装和运维的原理

本文将解读Rainbond集群的安装和运维的原理,使用户基本了解Rainbond的安装机制和运维重点,便于用户搭建大型Rainbond集群。 1.Rainbond集群节点概述 1.1 节点分类 属性 类型 说明 manage 管...

好雨云帮
36分钟前
5
0
好程序员大数据学习路线分享UDF函数

1.为什么需要UDF? 1)、因为内部函数没法满足需求。 2)、hive它本身就是一个灵活框架,允许用自定义模块功能,如可以自定义UDF、serde、输入输出等。 2.UDF是什么? UDF:user difine fun...

好程序员官方
39分钟前
4
0
Groovy中 Base64 URL和文件名安全编码

Base64 URL和文件名安全编码 Groovy支持Base64编码很长一段时间。 从Groovy 2.5.0开始,我们还可以使用Base64 URL和Filename Safe编码来使用encodeBase64Url方法对字节数组进行编码。 结果是...

白石
42分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部