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引用不同

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="pure-menu-link">News</a></li>

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a></li>

    </ul>

</div>