10. 表格 Tables

在 table 標(biāo)簽增加 .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

在奇數(shù)行添加類 .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>

?

注：對(duì)于 IE 8以上 支持 CSS3 的瀏覽器，可以在 Table 元素中增加類 .pure-table-striped，使其具有斑馬紋效果

?

11. 菜單

水平菜單 Horizontal Menu

增加類 .pure-menu-horizontal 創(chuàng)建水平菜單，通過增加類 .pure-menu-selected，使其處于選中狀態(tài)

<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>

?

帶標(biāo)題的菜單

用 ul 包裹菜單內(nèi)容，用 a 標(biāo)簽包裹菜單標(biāo)題文字，并對(duì)其增加類 .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 可使其處于可見狀態(tài)

<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>

?

菜單中的禁用項(xiàng)

添加類 .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>

?

頁(yè)碼

增加類 .pure-paginator 到 UL 標(biāo)簽中，為了使其具有按鈕效果，可增加 .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>

轉(zhuǎn)載于:https://www.cnblogs.com/wangchuang/p/4654781.html

總結(jié)

以上是生活随笔為你收集整理的响应式布局框架 Pure-CSS 5.0 示例中文版-下的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。