Pure表单

默认竖直分隔样式

添加class=”pure-class”

<table class="pure-table">    <thead>        <tr>            <th>name</th>            <th>sex</th>            <th>age</th>        </tr>    </thead>    <tbody>        <tr>            <td>zxc</td>            <td>man</td>            <td>23</td>        </tr>        <tr>            <td>zdy</td>            <td>woman</td>            <td>23</td>        </tr>    </tbody></table>

添加水平分隔样式

添加class=”pure-table-bordered”

<table class="pure-table pure-table-bordered">    <thead>        <tr>            <th>name</th>            <th>sex</th>            <th>age</th>        </tr>    </thead>    <tbody>        <tr>            <td>zxc</td>            <td>man</td>            <td>23</td>        </tr>        <tr>            <td>zdy</td>            <td>woman</td>            <td>23</td>        </tr>    </tbody></table>

只有水平分隔样式

添加class=”pure-table-horizontal”

<table class="pure-table pure-table-horizontal">    <thead>        <tr>            <th>name</th>            <th>sex</th>            <th>age</th>        </tr>    </thead>    <tbody>        <tr>            <td>zxc</td>            <td>man</td>            <td>23</td>        </tr>        <tr>            <td>zdy</td>            <td>woman</td>            <td>23</td>        </tr>    </tbody></table>

添加斑马纹（一条有颜色一条没有颜色间隔）

给tr标签添加class=”pure-table-odd”

<table class="pure-table">    <thead>        <tr>            <th>name</th>            <th>sex</th>            <th>age</th>        </tr>    </thead>    <tbody>        <tr class=" pure-table-odd ">            <td>zxc</td>            <td>man</td>            <td>23</td>        </tr>        <tr>            <td>zdy</td>            <td>woman</td>            <td>23</td>        </tr>        <tr class=" pure-table-odd ">            <td>zxc</td>            <td>man</td>            <td>23</td>        </tr>        <tr>            <td>zdy</td>            <td>woman</td>            <td>23</td>        </tr>        <tr class=" pure-table-odd ">            <td>zxc</td>            <td>man</td>            <td>23</td>        </tr>        <tr>            <td>zdy</td>            <td>woman</td>            <td>23</td>        </tr>    </tbody></table>

Pure菜单

pure-menu-disabled：菜单不可点击
pure-menu-selected：菜单已经被选中

水平菜单

添加class=pure-menu-hozizontal”

<div class="pure-menu pure-menu-horizontal" >    <ul class="pure-menu-list">        <li class="pure-menu-item pure-menu-disabled"><a href="#" class="pure-menu-link">Home</a></li>        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link ">Python</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Linux</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Shell</a></li>    </ul></div>

竖直菜单

添加class=pure-menu-horizontal

<div class="pure-menu pure-menu-horizontal">    <ul class="pure-menu-list">        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">            <a href="#" class="pure-menu-link">Python</a>             <ul class="pure-menu-children">                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Django</a></li>                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flask</a></li>             </ul>        </li>    </ul></div>

水平下拉菜单

添加一个ul标签，再添加class=”pure-menu-link”

<div class="pure-menu pure-menu-horizontal">    <ul class="pure-menu-list">        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">            <a href="#" class="pure-menu-link">Python</a>             <ul class="pure-menu-children">                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Django</a></li>                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flask</a></li>             </ul>        </li>    </ul></div>

竖直滚动菜单

需要添加class控制高和宽

<style>.custom-restricted {        height: 150px;        width: 200px;        border: 1px solid gray;        border-radius: 4px;    }</sytle><div class="pure-menu pure-menu-scrollable custom-restricted">    <ul class="pure-menu-list">        <li class="pure-menu-item"><a href="#" class="pure-menu-link">11</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">22</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">22</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">33</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">44</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">55</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">66</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">77</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">88</a></li>        <li class="pure-menu-item"><a href="#" class="pure-menu-link">99</a></li>    </ul></div>

分页菜单

整合了按钮和菜单

<div class="pure-menu pure-menu-horizontal">    <ul class="pure-menu-list">            <li class="pure-menu-item"><a class="pure-button  pure-menu-link" href="#">&#171;</a></li>            <li class="pure-menu-item"><a class="pure-button pure-menu-link" href="#">1</a></li>            <li class="pure-menu-item"><a class="pure-button pure-button-active pure-menu-link"  href="#">2</a></li>            <li class="pure-menu-item"><a class="pure-button pure-menu-link" href="#">3</a></li>            <li class="pure-menu-item"><a class="pure-button pure-menu-link" href="#">4</a></li>            <li class="pure-menu-item"><a class="pure-button pure-menu-link" href="#">5</a></li>            <li class="pure-menu-item"><a class="pure-button next pure-menu-link" href="#">&#187;</a></li>    </ul></div>

Tip：样式适用于pure6.0,
（ 于2016年9月25日，http://blog.csdn.net/bzd_111）