當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

响应式布局框架 Pure-CSS 5.0 示例中文版-下

發(fā)布時間：2024/4/17 CSS 35 豆豆

生活随笔收集整理的這篇文章主要介紹了响应式布局框架 Pure-CSS 5.0 示例中文版-下小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

10. 表格 Tables

在 table 標簽增加 .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 類

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

帶水平邊框的表格

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

? ? <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 創(chuàng)建水平菜單，通過增加類 .pure-menu-selected，使其處于選中狀態(tài)

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

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

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

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

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

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

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

轉載于:https://www.cnblogs.com/wangchuang/p/4654781.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python 列表创建
下一篇： Microsoft.XMLHTTP 使用