响应式布局框架 Pure-CSS 5.0 示例中文版-下
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="#">«</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="#">»</a></li>
</ul>