最近加入了一个GAE的项目cpedialog,该项目的前端布局采用YUI Grid CSS,我就顺便看了一下，YUI Grid CSS设计的非常优雅，思路非常清晰，打算使用CSS+DIV做网站布局的兄弟非常值得一看。下面我把我记录的一些要点列出来，便于我以后查阅，同时算是抛砖引玉吧。项目详情请参见 YUI Grid CSS
- 引入CSS 文件，这里yahoo提供了共用的css host文件，如果很多网站都使用yahoo host的js ,css,那么这些css,js将仅加载一次，有利于提高浏览速度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grids CSS </title>
<!-- Source File -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
</head>
- YUI Grid CSS建议把网站整体划分为3打部分，header, body, footer,并且这三部分放在一个大的div里,这三大部分使用id selector来做定义。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grids CSS </title>
<!-- Source File -->
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc">
<div id="hd"><!-- header --></div>
<div id="bd"><!-- body --></div>
<div id="ft"><!-- footer --></div>
</div>
</body>
</html>
- YUI Grid CSS为最外侧的div预先设置了4个宽度，分别是750px, 950px, 100%, 974px，可以通过改变最外侧div的id来改变它的宽度，同时用户还可以根据自己的需要自己定义最外侧div的宽度
<!-- #doc = 750px width, centered-->
<div id="doc"></div>
<!-- #doc2 = 950px width, centered -->
<div id="doc2"></div>
<!-- #doc3 = 100% width -->
<div id="doc3"></div>
<!-- #doc4 = 974px width, centered -->
<div id="doc4"></div>
- 绝大多数网站可以把body分成两个部分，main-block and second-block,YUI Grid CSS已经预先定义好了这两个块，并且可以通过改变css class的内容来调节main-block和second-block的左右位置，以及second-block的宽度，main-block将会占用second-block宽度剩余的宽度
<div id="doc" class="yui-t4"> <!-- change class to change preset -->
<div id="hd"></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
<div id="ft"></div>
</div>
- yui-b中的b 表示block, 在最外层的class="yui-t4"表示second-block占用180px，排列在main-block的右侧，除了yui-t4,之外，还有yui-t1 到yui-t6，每一个都表示不同的含义。
- 在main-block中还支持内嵌的grid,css class用yui-g来表示，在内嵌的grid中，包含不同的uint,css使用yui-u来表示
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
- 内嵌的grid还可以内嵌grid,这样就可以设计出非常复杂的page layout来，同时还可以指定那个unit在前，哪个unit在后，使用css class="first"
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-g first">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
</div>
- 对于内嵌的grid,如果使用css class="yui-g"，里面的两个unit是均分width的，如果有特殊需要，还可以指定，css class为yui-gb到yui-gf，这些css分别定义了两个unit如何分配grid的width
分享到：
相关推荐
YUI Grid CSS CSS 速记简表 CSS速查表(V2) CSS速记表 CSS2参考指导(V2) 实用CSS速查表 Javascript jQuery 1.4.2 直观速查表 JavaScript 速查表 JavaScript参考单 JavaScript真经 常用DOM方法 ...
* typography.css 字体排版规则 * grid.css 表格布局 * layout.css 布局 * form.css 表单 * general.css CSS常规设置 下面是一些不错的CSS框架，推荐学习使用。 Elements CSS Frameworks Elements 是一个...
YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习：1、布局的思想：使用 “负 margin（Negative Margins）” 技术详细可参阅：《Creating Liquid Layouts with Negative Margins》2、使用 em ：当用户改变字体...
注：ExtAspNet 基于一些开源程序，比如ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor. ExtAspNet 2012-06-03 v3.1.7 更新： -修正不能选蓝色主题BUG，修正后台生成RadioButtonList时，AJAX获取不到选中值...
ExtJs最开始基于YUI技术，由开发人员 JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。...
注：ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: http://extaspnet.codeplex.com/ 博客: http://sanshi.cnblogs.com/ 邮箱: sanshi.ustc@gmail...
ExtJs最开始基于YUI技术，由开发人员 JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是 一款不可多得的JavaScript客户端技术的精品。 ...
注：ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: http://extaspnet.codeplex.com/ 博客: http://sanshi.cnblogs.com/ 邮箱: sanshi.ustc@gmail...
最近流行的extjs，ExtJS(yui-ext)是一组扩展自Yahoo!UI，具有CS风格的Web用户界面组件。主要UI包括：dialog，grid，layout，tabs等。
目标是创建没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 注：ExtAspNet 基于一些开源程序，比如ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor. 支持的浏览器: IE 7.0+, Firefox ...
本文实例讲述了jquery easyui datagrid实现增加，修改，删除的方法。...link rel=stylesheet type=text/css href=/script/themes/default/easyui.css /> <link rel=stylesheet type=text/css href=/script/t
该插件组小巧使用方便，以下是一个从前台提交查询条件，从MSSQL返回json...link rel=”stylesheet” type=”text/css” href=”/inc/js/EasyUI/themes/default/easyui.css”> <link rel=”stylesheet” type=”te
注：ExtAspNet 基于一些开源程序，比如ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor. +2012-08-18 v3.1.9 -修正other/addtab.aspx示例的JS错误和BoundField使用Tooltip的错误（Dennis_Liu）。 +修正Window的...
注：ExtAspNet 基于一些开源程序，比如ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor. +2012-08-18 v3.1.9 -修正other/addtab.aspx示例的JS错误和BoundField使用Tooltip的错误（Dennis_Liu）。 +修正Window的...