AmazeUI基本样式

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 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打印机可见,浏览器不可见。

转载于:https://my.oschina.net/u/2385858/blog/776022

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/292514.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle基础中的基础视频讲座录像(西安)供免费下载

下载地址播放器也在上述目录中。记得那年园博会&#xff0c;培训中间有一天参观&#xff1a;转载于:https://blog.51cto.com/botang/1323099

她13岁自己造飞机,17岁进麻省理工,3篇黑洞论文被霍金引用......

全世界只有3.14 % 的人关注了爆炸吧知识13岁的时候&#xff0c;你在干嘛&#xff1f;我想&#xff0c;绝大多数人都没有萨布丽娜这么硬核——独自组装飞机。之后&#xff0c;16岁的萨布丽娜完成了生涯首飞&#xff0c;历史第一年轻。17岁时&#xff0c;她考上麻省理工&#xff…

Windows 10 2022 年更新来了!

面向 Release Preview 频道的 Windows 10 预览体验成员&#xff0c;微软现已发布 Windows 10 Build 19044.1499。主要修复1.微软修复了阻止某些环绕声音频在 Microsoft Edge 中播放的问题。2.微软修复了使用中文输入法时&#xff0c;一些应用停止工作的意外错误。3.微软修复了在…

当代成年人的生活状态......

1 小喵咪举起了它的狙击枪▼2 简直有毒...▼3 哈哈哈哈哈▼4 电焊既视感▼5 请问需要小猫咪吗&#xff1f;▼6 哈哈哈哈哈▼7 一物降一物▼7 数学能有多好玩&#xff1f;▼你点的每个赞&#xff0c;我都认真当成了喜欢

c++ why can't class template hide its implementation in cpp file?

类似的问题还有&#xff1a; why cant class template use Handle Class Pattern to hide its implementation? || why there are linker problems (undefined reference) to my class template? 我出现问题的源码&#xff08;见main.cpp,Stack.h,Stack.cpp&#xff09;&…

C# using static 声明

许多实际的扩展可以通过扩展方法来实现&#xff0c;并非所有实际的扩展都有可以扩展的类型。对于某些场景&#xff0c;简单的静态方法比较适合。为了更容易调用这些方法&#xff0c;可以使用 using static 声明除去类名。例如&#xff0c;如果打开了 System.Console using stat…

PHP性能追踪及分析工具xhprof的安装与使用

PHP性能追踪及分析工具xhprof的安装与使用 对于本地开发环境来说&#xff0c;进行性能分析xdebug是够用了&#xff0c;但如果是线上环境的话&#xff0c;xdebug消耗较大&#xff0c;配置也不够灵活&#xff0c;因此线上环境建议使用xhprof进行PHP性能追踪及分析。 我们今天就简…

C 语言 int 型乘法溢出问题

2019独角兽企业重金招聘Python工程师标准>>> long l; int a, b; l a*b; 因为 a*b 的结果仍然以 int 型保存, 所以即使 l 为long,仍然会有溢出,并且截去了部分数据.出现问题. 转载于:https://my.oschina.net/simon203/blog/175885

Android插件化开发基础之Java类加载器与双亲委派模型

类加载器 Java虚拟机类加载过程是把Class类文件加载到内存&#xff0c;并对Class文件中的数据进行校验、转换解析和初始化&#xff0c;最终形成可以被虚拟机直接使用的java类型的过程。 在加载阶段&#xff0c;java虚拟机需要完成以下3件事&#xff1a; a.通过一个类的全限定名…

将k8s制作成3D射击游戏,好玩到停不下来,附源码

点击上方蓝字 关注【我的小碗汤】大家好&#xff0c;我是小碗汤&#xff0c;今天演示一个项目&#xff0c;利用Unity做场景、用C#做交互逻辑&#xff0c;将k8s制作成一个3D射击游戏。正好最近在学习Unity&#xff0c;所以利用这个项目开始上手挺合适的。源码、可执行文件可以自…

JavaJVM之ClassLoader源码分析

层次结构和类图 ClassLoader层次结构&#xff1a;UML类图&#xff1a;sun.misc.Launcher.ExtClassLoader sun.misc.Launcher.AppClassLoader 显式加载类 在代码中显式加载某个类&#xff0c;有三种方法&#xff1a;this.getClass().getClassLoader().loadClass()Class.forName(…

ASP.NET Core Web API使用静态swagger.json文件

前言ASP.NET Core Web API默认集成了Swashbuckle&#xff0c;可以在运行时显示Swagger UI&#xff1a;而Swagger UI实际上是解析的动态生成的swagger.json&#xff1a;app.UseSwagger(); app.UseSwaggerUI(c > c.SwaggerEndpoint("/swagger/v1/swagger.json", &qu…

XenApp共享桌面打开文件警告与桌面文件由于Internet文件安全设置无法打开解决办法...

问题现象 1. 在使用了UPM与文件夹重定向后&#xff0c;个人的桌面路径就会变成一个UNC路径&#xff0c;这个时候如果用户登录共享桌面的话可以看到桌面与快速启动栏的文件与快捷方式&#xff0c;但是打开的时候就会遇到以下错误 这种情况是由于我们放的文件是一个网络路径所导致…

周选特辑|一些超棒的开源项目!

编程导航 每周新增资源优选特辑 02编程导航 致力于推荐优质编程资源 &#x1f48e;项目开源仓库&#xff1a;https://github.com/liyupi/code-nav跪求一个 star ⭐️哈喽大家好&#xff01;我是编程导航的小编火宝。美好的一周又过去了&#xff0c;大家有没有认真学习呢&#x…

Android插件化开发之DexClassLoader动态加载dex、jar小Demo

一、温故动态加载ClassLoader机制 如果对Android的ClassLoader加载机制不熟悉&#xff0c;猛戳Android插件化开发动态加载基础之ClassLoader工作机制 http://blog.csdn.net/u011068702/article/details/53248960 二、介绍 我们知道在Android中可以跟java一样实现动态加载jar&…

js监听多个事件_JavaScript中的事件与异常捕获解析

这篇文章主要给大家介绍了关于JavaScript中事件与异常捕获的相关资料&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;写的十分的全面细致&#xff0c;具有一定的参考价值&#xff0c;对此有需要的朋友可以参考学习下。如有不足之处&#xff0c;欢迎批评指正。事件处理…