最近加入了一个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方法 ...
YUI Grids CSS提供了一种优雅的方式来解决这个问题。对于非IE浏览器，可以使用CSS伪元素`:after`结合`content`, `display`, `height`, `clear`和`visibility`属性来清除浮动： ```css .yui-gf:after { content: ...
本文将围绕"yui的扩展ext.rar"这一主题，详细解析EXT在UI设计和Ajax应用中的核心知识点。 1. EXT概述 EXT基于YUI构建，提供了一套完整的前端框架，包括数据管理、组件系统、布局管理、表单元素等。EXT的主要特点是...
这些CSS框架各有特色，有的专注于网格系统，如960 Grid System和YUI Grids CSS，有的强调简洁性和可读性，如CleverCSS，还有些如Emastic和Elements，提供更加全面的解决方案，涵盖工作流程和设计元素。选择合适的CSS...
CSS（层叠样式表）是网页设计中用于控制布局和样式的语言。对于表单操作，CSS可以实现以下功能： 1. 样式美化：通过设置字体、颜色、边框、背景等属性，让表单元素看起来更吸引人。 2. 布局调整：使用display属性、...
* typography.css 字体排版规则 * grid.css 表格布局 * layout.css 布局 * form.css 表单 * general.css CSS常规设置 下面是一些不错的CSS框架，推荐学习使用。 Elements CSS Frameworks Elements 是一个...
此外，CSS3.9.0还支持媒体查询（media queries），这使得开发者可以根据设备特性和视口大小来应用不同的样式，从而实现响应式设计，确保网页在不同设备上的良好显示。 在HTML方面，YUI3.9.0可能包含了一些优化的...
除了 Element 对象，Ext 还包含了许多其他组件，如 Grid、Form、Panel、Window 等，这些组件使得构建复杂的用户界面变得更加容易。每个组件都有丰富的配置项和方法，可以满足不同场景的需求。 获取多个 DOM 节点时...
在现代网页设计和开发中，CSS框架已经成为标准实践的一部分，它们可以显著提高开发效率，同时保证跨浏览器的一致性和网页的响应式设计。 ### 列举的CSS框架 1. **1.960 Grid System** - 这是一个经典的CSS网格...
YUI Grids CSS是由Yahoo开发的基础网格系统，通过4种预设的页面宽度、6种模板和2到4列的区块功能，提供了超过1000种布局组合，仅需一个4KB的CSS文件。 Logicss Framework则是结合了CSS和PHP，旨在减少符合Web标准的...
2. **ZURB CSS Grid Builder**：ZURB是一家知名的设计公司，其提供的CSS Grid Builder是一款直观的在线工具，可以帮助你自定义1到12列的网格布局，并生成相应的CSS代码。 3. **Grid System Generator**：这款生成器...
960 Grid System、YUI Grid layout和Blueprint Grid layout等框架提供了实现网格布局的方法，使得页面元素的定位更加简单和直观，提高了设计和开发速度。 5. **HTML/CSS编辑器** 选择一个功能强大的代码编辑器对于...
注：ExtAspNet 基于一些开源程序，比如ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor. ExtAspNet 2012-06-03 v3.1.7 更新： -修正不能选蓝色主题BUG，修正后台生成RadioButtonList时，AJAX获取不到选中值...
CSS Sprites 技术是一种网页图像优化方法，它将多个小图像合并到一张大图...同时，随着前端技术的发展，如CSS Grid和CSS Modules等新特性，可能会提供替代解决方案，但目前CSS Sprites依然是一个值得掌握的重要技能。
Flexbox和Grid是现代CSS布局的主要工具，但并非所有浏览器都完全支持。手册将涵盖这些新布局模式在各浏览器中的兼容性，指导开发者进行适配。 6. **响应式设计**： 针对不同屏幕尺寸和设备，手册会列出媒体查询@...
9. **利用CSS Grid和Flexbox**：这两个现代布局技术可以替代许多传统布局方法，使布局更灵活且易于控制。 10. **避免使用内联样式**：除非必要，否则避免在HTML中直接写样式，以保持CSS的集中管理。 11. **注释与...
8. CSS Instant Blueprint: 这是一个为Web设计师设计的快速创建网页项目框架的工具，可以节省设计初稿的时间。 9. Web HTML / XHTML / CSS / JavaScript / Node.js / jsFiddle: 这些关键词代表了Web设计和开发的...
* YUICompressor * Flash桌面onering文件加载 * Do.jsoz.js * Douban-JSLint * CSSLint 前端基础架构的实施： * PREPROCESSING SYSTEM Javascript * PREPROCESSING SYSTEM CSSPython-SCSSDouban-UICSS3-MIXIN * 库...
- **使用 normalize.css 或 reset.css**：这些库如YUI可以帮助清除浏览器默认样式，确保在所有浏览器中的一致表现。 2. **CSS规范写法**： - **遵循W3C标准**：确保CSS代码符合W3C CSS规范，这有助于提高代码的...