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

10. 表格 Tables

在 table 标签增加 .pure-table 类

<thead>

<tr>

<th>Model</th>

</tr>

</thead>

<tbody>

<tr>

<td>Honda</td>

<td>Accord</td>

</tr>

<tr>

<td>Toyota</td>

<td>Camry</td>

</tr>

<tr>

<td>Hyundai</td>

<td>Elantra</td>

</tr>

</tbody>

</table>

带边框的表格

添加 .pure-table-bordered 类

<thead>

<tr>

<th>Model</th>

</tr>

</thead>

<tbody>

<tr>

<td>Honda</td>

<td>Accord</td>

</tr>

<tr>

<td>Toyota</td>

<td>Camry</td>

</tr>

<tr>

<td>Hyundai</td>

<td>Elantra</td>

</tr>

</tbody>

</table>

带水平边框的表格

<thead>

<tr>

<th>Model</th>

</tr>

</thead>

<tbody>

<tr>

<td>Honda</td>

<td>Accord</td>

</tr>

<tr>

<td>Toyota</td>

<td>Camry</td>

</tr>

<tr>

<td>Hyundai</td>

<td>Elantra</td>

</tr>

</tbody>

</table>

带斑马纹的表格 Striped Table

在奇数行添加类 .pure-table-odd

<thead>

<tr>

<th>Model</th>

</tr>

</thead>

<tbody>

<td>Honda</td>

<td>Accord</td>

</tr>

<tr>

<td>Toyota</td>

<td>Camry</td>

</tr>

<td>Hyundai</td>

<td>Elantra</td>

</tr>

<tr>

<td>Focus</td>

</tr>

<td>Nissan</td>

<td>Sentra</td>

</tr>

<tr>

</tr>

<td>Honda</td>

<td>Civic</td>

</tr>

<tr>

</tr>

</tbody>

</table>

注：对于 IE 8以上支持 CSS3 的浏览器，可以在 Table 元素中增加类 .pure-table-striped，使其具有斑马纹效果

11. 菜单

水平菜单 Horizontal Menu

增加类 .pure-menu-horizontal 创建水平菜单，通过增加类 .pure-menu-selected，使其处于选中状态

<ul>

<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><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 可使其处于可见状态

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

</ul>

</div>

下拉菜单

此功能需要 Javascript 支持，如 YUI 的 Y.Menu

<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><a href="#">Autos</a></li>

<li><a href="#">Flickr</a></li>

<li><a href="#">Answers</a></li>

<li>

<ul>

<li><a href="#">Horoscopes</a></li>

<li><a href="#">Games</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><a href="#">Flickr</a></li>

<li class="pure-menu-disabled"><a href="#">Disabled Item</a></li>

</ul>

</div>

页码

增加类 .pure-paginator 到 UL 标签中，为了使其具有按钮效果，可增加 .pure-button 类

</ul>

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

响应式布局框架 Pure-CSS 5.0 示例中文版-上
0. Pure-CSS 介绍 Pure CSS 是雅虎出品的 CSS 框架, 依托于Normalize.CSS,在不适用任何JS代码情况下即可实现响应式布局的轻量级框架,无依赖,体积小. 1. CDN ...
响应式布局中的CSS相对量
一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...
响应式布局框架 Pure-CSS 5.0 示例中文版-中
8. 表单 Form 在 form 标签中添加 .pure-form 类,可生成单行表单(inline) 效果图: 代码: <form class="pure-form"&g ...
2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com
近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那 ...
响应式布局 —— Demo
响应式布局实例演示What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这 ...
[html5] 学习笔记-响应式布局
1.响应式布局介绍响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...
html自己写响应式布局（说起来很高大上的样子，但是其实很简单）
第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...
asp.net MVC通用权限管理系统-响应式布局-源码
一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...
前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

随机推荐

android——根据MVC框架设计的结构
linux下批量添加新用户
作为一个系统管理员,可能要经常的为机器添加用户,可能是在一台机器上添加很多用户,也有可能是在很多机器上要添加同一个用户. 基本上,批量添加用户有两种方式,一是用useradd + passwd命令配合 ...
ARC中的@autoreleasepool还有作用吗?
ARC中的@autoreleasepool还有作用吗? QUESTION For the most part with ARC (Automatic Reference Counting), we d ...
制作Java安装程序
这个工具利用 ANT 来制作在 Windows, MacOS X, Unix 平台上可执行的文件,比如 exe,zip,jar.ROXES ANT Tasks 基于 GPL 发布. http://ww ...
booksleeve 使用
By offering pipelined, asynchronous, multiplexed and thread-safe access to redis, BookSleeve enables ...
lodop同一页面一次性打印多次
怎么让打印机打印双份?lodop有设置吗?SET_PRINT_COPIES名称:设置打印份数格式:SET_PRINT_COPIES(intCopies)功能:设置本次打印的份数结果:返回逻辑结果,成功 ...
Symfony安装及使用
安装Symfony,使用 brew install homebrew/php/symfony-installer 开始一直下载不了包,我手动浏览器下载了几个,发现好像都是Permission问题,运行 ...
C#创建word，操作、读写
要使用C#操作word,首先要添加引用: 1.添加引用->COM->Microsoft Word 11.0 Object Library 2.在.cs文件中添加 using Word;下面 ...
Python 中的几种复制文件的用法
1. os.system Python code import os import tempfile filename1 = tempfile.mktemp (".txt") #产 ...
vue computed 可以使用getter和setter
var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // ...

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

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

随机推荐

热门专题