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="#">«</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="#">»</a></li>
</ul>
</div>
Tip:样式适用于pure6.0,
( 于2016年9月25日,http://blog.csdn.net/bzd_111)