Pure-CSS 使用帮助

0. Pure-CSS 介绍
Pure CSS 是雅虎出品的 CSS 框架，
依托于 Normalize.CSS，在不适用任何JS代码情况下即可实现响应式布局的轻量级框架，无依赖，体积小。
 
快速定位：
 
 
1. CDN
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
 
2. 设置 Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
3. 完整 HTML5 模板
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
 
<body>
    <!--
    网页内容
    -->
</body>
</html>
 
4. 隐藏元素
在元素中加入hidden 属性，效果相当于 display: none !important;
<input type="text" name="_csrf" hidden>
 
5. 图片适应视窗大小
在 IMG 标签中加入类 .pure-img
<img class="pure-img" src="...">
 
6. 网格 Grids
网格对象中包含两种样式类：网格类（pure-g）和单元格类（pure-u 或者 pure-u-*）
单元格的大小由类命指定， 如：pure-u-1-2 表示 50% 宽度， pure-u-1-5 表示 20% 宽度
示例：
<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

 

7. 响应式网格 Responsive Grids
PureCSS默认没有添加响应式网格框架，需要时请手动添加一下内容到 head 标签中
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->
 
对比普通网格与响应式网格
普通：
<div class="pure-g">
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
</div>

 

响应式
<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>
 
在大屏幕里，普通 与 响应式 的单元格宽度均是 33.3%，但在小屏幕中 响应式 的单元格宽度将变为 100%
默认的媒体大小定义
KeyCSS Media QueryAppliesClassname
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-*
注：默认情况下 1em = 16px
 
在表格中应用边框与间距
<style>
    .pure-g > div {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .l-box {
        padding: 1em;
    }
</style>
<div class="pure-g">
    <div class="pure-u-1-2 l-box"> ... </div>
    <div class="pure-u-1-2 l-box"> ... </div>
</div>
注：使用 box-sizing 可以防止边框占用像素，扰乱布局
 
为 了更好的兼容性，网格默认对 <html>, <button>, <input>, <select>, 和 <textarea> 使用了 font-family: sans-serif; 如需要修改，可添加如下样式：
<style>
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* 自定义字体 */
    font-family: Georgia, Times, "Times New Roman", serif;
}
</style>
 
8. 表单 Form
在 form 标签中添加 .pure-form 类，可生成单行表单（inline）
效果图：

代码：
<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 标签中添加 .pure-form-stacked 类，可生成栈型表单
效果图：

代码：
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>A Stacked Form</legend>
 
        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Email">
 
        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Password">
 
        <label for="state">State</label>
        <select id="state">
            <option>AL</option>
            <option>CA</option>
            <option>IL</option>
        </select>
 
        <label for="remember" class="pure-checkbox">
            <input id="remember" type="checkbox"> Remember me
        </label>
 
        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>

 

在 form 标签中添加 .pure-form-aligned 类，可生成排型表单
效果图：
代码：
<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input id="name" type="text" placeholder="Username">
        </div>
 
        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>
 
        <div class="pure-control-group">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Email Address">
        </div>
 
        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>
 
        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I've read the terms and conditions
            </label>
 
            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>
 
通过与响应式网格（responsive-grids）结合，可生成多列表单
效果图：

代码：
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Legend</legend>
 
        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="first-name">First Name</label>
                <input id="first-name" type="text">
            </div>
 
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="last-name">Last Name</label>
                <input id="last-name" type="text">
            </div>
 
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="email">E-Mail</label>
                <input id="email" type="email" required>
            </div>
 
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="city">City</label>
                <input id="city" type="text">
            </div>
 
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="state">State</label>
                <select id="state" class="pure-input-1-2">
                    <option>AL</option>
                    <option>CA</option>
                    <option>IL</option>
                </select>
            </div>
        </div>
 
        <label for="terms" class="pure-checkbox">
            <input id="terms" type="checkbox"> I've read the terms and conditions
        </label>
 
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>
 
通过对 fieldset 增加 .pure-group 类， 可对元素分组
效果图：
代码：
<form class="pure-form">
    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="Username">
        <input type="text" class="pure-input-1-2" placeholder="Password">
        <input type="email" class="pure-input-1-2" placeholder="Email">
    </fieldset>
 
    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="Another Group">
        <input type="text" class="pure-input-1-2" placeholder="More Stuff">
    </fieldset>
 
    <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>

 

控制表单元素大小，可以通过增加 .pure-input-* 类实现，如 pure-input-2-3 代表宽度为 66.6%
 
为输入项增加 required 属性，使其具有必填提示
<input type="email" placeholder="Requires an email" required>
 
为输入项增加 disabled 属性，使其不可用
<input type="text" placeholder="Disabled input here..." disabled>
 
为输入项增加 readonly 属性，使其只读
<input type="text" value="Readonly input here..." readonly>
 
为输入项增加 pure-input-rounded 属性，使其变圆角
<input type="text" class="pure-input-rounded">

 

复选框（checkbox）和单选框（radio），增加 .pure-checkbox 和 .pure-radio，保持其样式整齐
效果图：

代码：
<form class="pure-form">
    <label for="option-one" class="pure-checkbox">
        <input id="option-one" type="checkbox" value="">
        Here's option one.
    </label>
 
    <label for="option-two" class="pure-radio">
        <input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
        Here's a radio button. You can choose this one..
    </label>
 
    <label for="option-three" class="pure-radio">
        <input id="option-three" type="radio" name="optionsRadios" value="option2">
        ..Or this one!
    </label>
</form>

 

9. 按钮
在 a 或 button 标签中添加类 .pure-button
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>
 
禁用的按钮 Disabled Button
<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>
<button class="pure-button pure-button-disabled">A Disabled Button</button>
 
激活的按钮 Active Button，同按下状态
<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>
 
高亮按钮 Primary Button
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>
 
自定义按钮
<div>
    <style scoped>
 
        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
 
        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }
 
        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }
 
        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }
 
        .button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }
 
    </style>
 
    <button class="button-success pure-button">Success Button</button>
    <button class="button-error pure-button">Error Button</button>
    <button class="button-warning pure-button">Warning Button</button>
    <button class="button-secondary pure-button">Secondary Button</button>
</div>
 
按钮大小
<div>
    <style scoped>
 
        .button-xsmall {
            font-size: 70%;
        }
 
        .button-small {
            font-size: 85%;
        }
 
        .button-large {
            font-size: 110%;
        }
 
        .button-xlarge {
            font-size: 125%;
        }
 
    </style>
 
    <button class="button-xsmall pure-button">Extra Small Button</button>
    <button class="button-small pure-button">Small Button</button>
    <button class="pure-button">Regular Button</button>
    <button class="button-large pure-button">Large Button</button>
    <button class="button-xlarge pure-button">Extra Large Button</button>
</div>
 
图标按钮
要使用图标按钮，需添加 CSS 字体文件，比如 Font-Awesome 
<button class="pure-button">
    <i class="fa fa-cog"></i>
    Settings
</button>
 
<a class="pure-button" href="#">
    <i class="fa fa-shopping-cart fa-lg"></i>
    Checkout
</a>
 
10. 表格 Tables
在 table 标签增加 .pure-table 类
<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
 
    <tbody>
        <tr>
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
 
        <tr>
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>
 
带边框的表格
添加 .pure-table-bordered 类
<table class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
 
    <tbody>
        <tr>
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
 
        <tr>
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>

 

带水平边框的表格
 
<table class="pure-table pure-table-horizontal">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
 
    <tbody>
        <tr>
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
 
        <tr>
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>
 
带斑马纹的表格 Striped Table
在奇数行添加类 .pure-table-odd
<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
 
    <tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
 
        <tr>
            <td>4</td>
            <td>Ford</td>
            <td>Focus</td>
            <td>2008</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>5</td>
            <td>Nissan</td>
            <td>Sentra</td>
            <td>2011</td>
        </tr>
 
        <tr>
            <td>6</td>
            <td>BMW</td>
            <td>M3</td>
            <td>2009</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>7</td>
            <td>Honda</td>
            <td>Civic</td>
            <td>2010</td>
        </tr>
 
        <tr>
            <td>8</td>
            <td>Kia</td>
            <td>Soul</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>
 
注：对于 IE 8以上 支持 CSS3 的浏览器，可以在 Table 元素中增加类 .pure-table-striped，使其具有斑马纹效果
 
11. 菜单
水平菜单 Horizontal Menu
增加类 .pure-menu-horizontal 创建水平菜单，通过增加类 .pure-menu-selected，使其处于选中状态
<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li><a href="#">Home</a></li>
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>
 
带标题的菜单
用 ul 包裹菜单内容，用 a 标签包裹菜单标题文字，并对其增加类 .pure-menu-heading
<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <a href="#" class="pure-menu-heading">Site Title</a>
 
    <ul>
        <li class="pure-menu-selected"><a href="#">Home</a></li>
        <li><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>

 

纵向菜单
只需要增加类 .pure-menu即可，增加 .pure-menu-open 可使其处于可见状态
<div class="pure-menu pure-menu-open">
    <a class="pure-menu-heading">Yahoo! Sites</a>
 
    <ul>
        <li><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
        <li class="pure-menu-heading">More Sites!</li>
        <li><a href="#">Games</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">OMG!</a></li>
    </ul>
</div>

 

下拉菜单
此功能需要 Javascript 支持，如 YUI 的 Y.Menu
<div id="demo-horizontal-menu">
    <ul id="std-menu-items">
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
        <li>
            <a href="#">Other</a>
            <ul>
                <li class="pure-menu-heading">More from Yahoo!</li>
                <li class="pure-menu-separator"></li>
                <li><a href="#">Autos</a></li>
                <li><a href="#">Flickr</a></li>
                <li><a href="#">Answers</a></li>
                <li>
                    <a href="#">Even More</a>
                    <ul>
                        <li><a href="#">Horoscopes</a></li>
                        <li><a href="#">Games</a></li>
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">OMG</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<script>
YUI({
    classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {
 
    var horizontalMenu = new Y.Menu({
        container         : '#demo-horizontal-menu',
        sourceNode        : '#std-menu-items',
        orientation       : 'horizontal',
        hideOnOutsideClick: false,
        hideOnClick       : false
    });
 
    horizontalMenu.render();
    horizontalMenu.show();
 
});
</script>
 
菜单中的禁用项
添加类 .pure-menu-disabled
<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <a href="#" class="pure-menu-heading">Site Title</a>
 
    <ul>
        <li class="pure-menu-selected"><a href="#">Home</a></li>
        <li><a href="#">Flickr</a></li>
        <li class="pure-menu-disabled"><a href="#">Disabled Item</a></li>
    </ul>
</div>

 

页码
增加类 .pure-paginator 到 UL 标签中，为了使其具有按钮效果，可增加 .pure-button 类
<ul class="pure-paginator">
    <li><a class="pure-button prev" href="#">&#171;</a></li>
    <li><a class="pure-button" href="#">1</a></li>
    <li><a class="pure-button pure-button-active" href="#">2</a></li>
    <li><a class="pure-button" href="#">3</a></li>
    <li><a class="pure-button" href="#">4</a></li>
    <li><a class="pure-button" href="#">5</a></li>
    <li><a class="pure-button next" href="#">&#187;</a></li>
</ul>

 

posted on 2015-02-05 17:36  BookerT  阅读(1996)  评论(0)    收藏  举报