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

时间： 2024-10-12 00:45:41

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

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

0. Pure-CSS 介绍 Pure CSS 是雅虎出品的 CSS 框架, 依托于Normalize.CSS,在不适用任何JS代码情况下即可实现响应式布局的轻量级框架,无依赖,体积小. 1. CDN <linkrel="stylesheet"href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"> 2. 设置 Viewport <meta name="viewport"

响应式布局中的CSS相对量

一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格.在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需要用到"自适应的图片"."流动布局"等技术. 体现在 CSS 代码编写上,就需要前端开发人员精准掌握特定属性的相对量表示方法.然而,其中一些相对量的计算方法很容易混淆. 本文在完整梳理全部 CSS 属性基础上,将其中的"相对单位.百分比相对量.数字相对量&quo

web多终端开发学习系列(一)--- 响应式布局框架BootStrap学习

最近在温习web的开发,毕业之后就没接触web开发了.当时HTML5在国内貌似还是刚刚起步,能适配HTML5的浏览器很少.移动界面框架也才刚刚开始,记得当时曾经学过sencha touch的移动框架以及jquery mobile框架.这两个框架都对响应式布局进行了不错的适配及实现.响应式布局说白了就是对于多个移动终端只需一个界面即可全部适配,可大大地减少开发的工作量. 最近一年Bootstrap开始广泛地被使用了,基于此框架开发出来的插件数不胜数.所以我花了几天时间学习了下Bootstrap,本

CSS3的响应式布局Home / HTML/CSS / CSS3的响应式布局

做手机端网页需要用到响应式布局,首先需要再HTML文件头声明一下: 主要目的是宽度控制和禁止用户缩放,具体参数自己GOOGLE一下. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 下面是CSS判断是PC端还是移动端其实很简单,用CSS3的媒体查询

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

8. 表单 Form 在 form 标签中添加 .pure-form 类,可生成单行表单(inline) 效果图: 代码: <form class="pure-form"> <fieldset> <legend>A compact inline form</legend> <input type="email" placeholder="Email"> <input type=&q

2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com

近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那么些部分不符合心意,如果自己扩展,那就不是一般的工作量了. 然后是wex5,宣传上是最强大的移动开发框架,一旦测试,采用java的模式,将一个简单的工作直接变成了另一个windows编程的学习,那是一次痛苦的体验.当然也是因为wex5主要目标是app,而我要的仅仅是移动wap端.(wap这个词实际上

Demo —— 响应式布局

响应式布局实例演示 What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过. 优点:面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题. 缺点:兼容各种设备工作量大,效率低下:代码累赘,

推荐12个创建响应式布局的优秀网格框架

在这篇文章中,我们为大家推荐12个创建响应式布局的优秀网格框架.如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务.enjoy! 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 十个拥有丰富 UI 组件的 JavaScript 框架 十款精心挑选的在线 CSS3 代码生成工具 开发者必备的八个最佳云端集成开发环境 2012年度最佳 Web 前端开发工具和框架 Pure Pur

前端框架bootstrap(响应式布局)入门

Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现. 作用: 1.Bootstrap使得Web开发更加快捷,高效 2.Bootstrap支持响应式开发,解决了移动互联网前端开发问题. 简单介绍一下: 该框架是Twitter公司的设计师Mark Otto和jacob Thornton