响应式布局框架 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>