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基本样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。