2019獨角獸企業(yè)重金招聘Python工程師標準>>>

　AmazeUI是一個輕量級、Mobile first的前端框架，基于開源社區(qū)流行的前端框架編寫。

　　

　　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只跟基準設置關聯(lián)，只要修改基準字號，所有使用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分發(fā)版包含的字體。

　在AmazeUI的實踐中，font-family設置只在base樣式中出現(xiàn)了一兩次。在具體項目中，不建議到處設置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>無論走到哪里，都應該記住，過去都是假的，回憶是一條沒有盡頭的路，一切以往的春天都不復存在，就連那最堅韌而又狂亂的愛情歸根結底也不過是一種轉瞬即逝的現(xiàn)實。</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基本样式的全部內容，希望文章能夠幫你解決所遇到的問題。

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