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.菜单

<style>
.custom-restricted-width { /* To limit the menu width to the content of the menu: */ display: inline-block; /* Or set the width explicitly: */ /* width: 10em; */ } </style> <div class="pure-menu custom-restricted-width"> <span class="pure-menu-heading">Yahoo Sites</span> <ul class="pure-menu-list"> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li> <li class="pure-menu-heading">More Sites</li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li> <li class="pure-menu-item"><a href="#" class="