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…

hdu 1466 计算直线的交点数 递推

以前做这道题目的时候&#xff0c;花了好长时间找规律&#xff0c;感觉十分高大上&#xff0c;今天回顾这个题目的时候&#xff0c;突然有了顿悟&#xff0c; 有了递推的思想就容易解决了。 题意&#xff1a;给你n条直线&#xff0c;问&#xff1a;输出这些直线所有相交情况下的…

Android插件化开发基础之App如何动态加载类

在 Java 里面&#xff0c;我们可以把一些类放到 .jar 文件里面&#xff0c;然后用 ClassLoader 动态加载。例如&#xff1a; URLClassLoader ucl URLClassLoader.newInstance(new URL[] {new URL("file:/sdcard/files/test.jar")}); Class clazz ucl.loadClass…

Windows 10 2022 年更新来了!

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

python小工具小发明_【kimol君的无聊小发明】—用python写截屏小工具

前言今天我看了一下自己的文件夹&#xff0c;发现了自己写了许多似乎很无聊的代码。于是乎&#xff0c;一个想法油然而生&#xff1a;“生活已经很无聊了&#xff0c;不如再无聊一点叭”。说干就干&#xff0c;那就开一个专题&#xff0c;我们称之为kimol君的无聊小发明。妙…啊…

npm执行命令后无任何响应(windows下)

曾经执行过npm config set prefix 命令&#xff0c; 导致npm的config乱掉了&#xff0c; 找到这个文件.npmrc&#xff0c; 然后删掉就可以了 。 我的.npmrc位置在C:\Users\Administrator下。转载于:https://www.cnblogs.com/josjo/p/6099631.html

职业技能培训

实战技能 精通web容器 Apache、Nginx 精通Redis、Mongodb、Memcache、Hadoop 精通CGI/FastCGI PHP扩展 精通Qt和Webkt 应用技能 gccgdbmakeautoconfSourceInsightvim理论素养 数据库数据结构操作系统算法WEB转载于:https://www.cnblogs.com/heidsoft/p/3418660.html

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

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;&…

Android插件化开发之动态加载技术系列索引

动态加载介绍 在Android开发中采用动态加载技术&#xff0c;可以达到不安装新的APK就升级APP功能的目的&#xff0c;可以用来到达快速发版的目的&#xff0c;也可以用来修复一些紧急BUG。 现在使用得比较广泛的动态加载技术的核心一般都是使用 ClassLoader &#xff0c;后者能够…

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性能追踪及分析。 我们今天就简…

python后面空格报错_python中空格和table混用报错原因

python是一门严格遵守缩进的语言&#xff0c;缩进的规则代表着程序的层级关系。我们来看一段代码。class MyForm(Form):value1 StringField(value1)value2 StringField(value2)value3 StringField(value3) #这行用的是Tab缩进submit SubmitField(Submit)learn pytho…

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;所以利用这个项目开始上手挺合适的。源码、可执行文件可以自…

Struts学习笔记_i18n

1. I18N原理 a) ResourceBundle和Locale的概念 b) 资源文件 c) native2ascii //test.javaimport java.util.Locale; import java.util.ResourceBundle;public class Test {public static void main(String[] args) {ResourceBundle res ResourceBu…

map reduce相关程序

Test_1.java /** * Hadoop网络课程模板程序* 编写者&#xff1a;James*/ import java.io.IOException; import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Date;import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.co…