pure.css 学习记录

Posted 2020-07-25 明天后浪

兼容性记录:

• 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="pure-menu-link">News</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a></li>
    </ul>
</div>