AmazeUI基本样式
2019独角兽企业重金招聘Python工程师标准>>>
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
AmazeUI基本样式相关推荐
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- 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(基本样式4)--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css(常用组件4)--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- amazeui页面分析之登录页面
amazeui页面分析之登录页面 一.总结 1.tpl命名空间:tpl命名空间的样式都是从app.css里面来的,app.css用用来移动网站开发的样式 2.表单样式:am-form到am-form- ...
- amazeui学习笔记--css(HTML元素2)--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
- amazeui页面分析5
amazeui页面分析5 一.总结 1.把原模板当成样例集合就好 2.都是一块一块的,删改等操作都方便 3.list方面的操作很多都是ui配合li 4.其实容器本质还是div,所以真的算简单了 5.样 ...
- amazeui学习笔记--css(HTML元素4)--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
最新文章
- 计算机组成原理ALU加法器
- ​Google 鼓励的 13 条代码审查标准,建议收藏!
- 【转】为什么要写技术博,写在前面的话
- SEO之HTML代码优化
- 编程之美-蚂蚁爬杆方法整理
- 学习笔记-----fputs与printf
- Python+OpenGL切分图形窗口在多视区中显示不同动画
- android的Service
- moonmq: 用go实现的高性能message queue
- 初次接触ruby的困惑
- softlockup/hardlockup原理详细介绍
- python 3d大数据可视化软件_4个最受欢迎的大数据可视化工具
- linux相关的东东 来自dbanotes
- linux redis命令客户端,Redis客户端与基本命令
- 一个能够让你快速从html结构生成css结构的vscode插件
- 点云统一法线方向(未知视点)
- 《富爸爸穷爸爸》第一课
- Codecademy 你值得拥有,非常棒的编程学习网站
- Linux环境下java安装、配置
- 情报分析-diamond_threat_model
热门文章
- Echarts多任务可视化之再优化
- Teradata天睿公司推出适用各种部署环境的全球最强分析数据库
- goaccess_nginx日志分析工具
- 【BZOJ3036】绿豆蛙的归宿 概率DP
- Android两个注意事项.深入了解Intent和IntentFilter(两)
- android:自己实现能播放网络视频url的播放器
- Tomcat一步步实现反向代理、负载均衡、内存复制
- docker wsl2启动不了_Docker学习笔记
- shell结合expect写的批量scp脚本工具
- 关于wpf,datagrid,双向数据绑定用法解决方案