響應式佈局框架 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="#">&#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>