pure.css 学习记录
兼容性记录:
- IE 8+
- Latest Stable: Firefox, Chrome, Safari
- iOS 6-8
- Android 4.x
处理兼容性
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
处理宽度不同的屏幕的css引用不同
Key | CSS Media Query | Applies | Classname |
---|---|---|---|
None | None | Always | .pure-u-* |
sm |
@media screen and (min-width: 35.5em) |
≥ 568px | .pure-u-sm-* |
md |
@media screen and (min-width: 48em) |
≥ 768px | .pure-u-md-* |
lg |
@media screen and (min-width: 64em) |
≥ 1024px | .pure-u-lg-* |
xl |
@media screen and (min-width: 80em) |
≥ 1280px | .pure-u-xl-* |
1.
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div> // 可以写为 pure-u-2-3 pure-u-1-10 分别代表的意思是 3份中占2份,和 10份中占一份的宽度,是等宽的
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div
2.表格
<form class="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
<form class="pure-form"> <input class="pure-input-1" type="text" placeholder=".pure-input-1"><br> <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br> <input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br> <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br> <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br> </form>
3.按钮
<a class="pure-button" href="#">A Pure Button</a> <button class="pure-button">A Pure Button</button>
<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a> <button class="pure-button pure-button-disabled">A Disabled Button</button>
<a class="pure-button pure-button-active" href="#">An Active Button</a> <button class="pure-button pure-button-active">An Active Button</button>
还有状态按钮
button-success button-error button-warn 等
4.表格
<table class="pure-table"></table> 是只带外框内部不带边框的table
<table class="pure-table pure-table-bordered"></table> 带外边框和内边框的
<table class="pure-table pure-table-horizontal">只带外框和横框线的
<tr class="pure-table-odd"> 是带有背景色的
5.菜单