本文介绍了如何实现YUI Grids CSS。
编写基本的标签
通过使用标准的文档类型以及包含YUI的CSS文件后，我们可以轻易实现垂直三栏布局：最上面是页眉、中间是内容部分、最下面是页脚。这种布局并不是必须的，不过在这里，我们将这种布局方式来作为例子。代码如下：
<!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>
设置页面的总宽度
我们只要改变外层div的id就可以指定页面的宽度。750px -- #doc，950px -- #doc2，100% -- #doc3。从2.3.0版本开始，又添加了一种宽度974px -- #doc4。你可以在Grids示例页面中看到所有宽度的示例页面。
<!-- #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>
注意：我们的设计师建议，100%宽度布局的时候，左右需要留10像素的边距。这是为了防止在Chrome浏览器中内容溢出。如果你不想保留这10个像素的宽度，那么你可以添加以下这段代码来取消边距：
<style>
#doc3 {margin:auto;}
</style>
自定义页面宽度
如果你想要自定义页面的宽度，那也很简单。将你想要的宽度处以13即可（在所有非IE浏览器中，在IE中，你需要除以13.3333）。比如你想要将页面宽度设置为600px，那么代码可以这么写（效果页面）：
<style>
#custom-doc {
margin:auto;text-align:left; /* leave unchanged */
width:46.15em;/* non-IE */
*width:45.00em;/* IE */
min-width:600px;/* optional but recommended */
}
</style>
注意：
你需要记住以下几点：
- 之所以我们选择使用em作为长度单位，是因为这样可以让页面宽度自动适应用户的浏览器预设文本大小，提高用户体验。
- 虽然YUI Fonts使用em作为单位在兼容性上已经做的很好了，但是在IE中仍然会有那么一点点差别。
- 请确保IE中的width属性要写在所有其他属性的最后。
- 设置min-width属性虽然不是必须的，但是它能在页面可视区域变小的时候帮助Grids来保持页面的一致性。
- text-align与margin属性是用来让页面居中的，请不要修改他们。
使用预设的模板
大多数网页都含有主次两个内容区域。Grids的模板部分允许你自由指定他们的位置（也就是窄的部分到底在左边还是右边）。只要页面总体宽度定下来了（不管是固定宽度还是100%宽度），那么指定了窄的部分的宽度后，宽的部分宽度就会自动充满剩余的区域。
这两个部分都使用div.yui-b来定义，这里b的意思为block。而主内容区域（宽的部分）则需要放在一个div里面，用div#yui-main来指定。代码如下：
...
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
...
代码顺序无关性
有些情况下，人们需要在显示的时候将次要区域放在主要区域前面。例如，有些网站将菜单栏放在次要区域，但是现实的时候让其显示在主要区域的前面，这样方便用户操作，同时也可以达到搜索引擎优化的效果（SEO）。YUI Grids在yui-b上提供了代码无关的排版方式，将页面显示与代码编写分离开来。换句话说，你完全可以将主体部分写在次要部分的前面，但是在现实的时候让它显示在次要部分的后面。
预设的模板宽度
模板样式
预设示例
.yui-t1 |
160px 左侧 |
查看 |
.yui-t2 |
180px 左侧 |
查看 |
.yui-t3 |
300px 左侧 |
查看 |
.yui-t4 |
180px 右侧 |
查看 |
.yui-t5 |
240px 右侧 |
查看 |
.yui-t6 |
300px 右侧 |
查看 |
下面的代码展示了如何使用一个预设的模板：
...
<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>
...
我们之所以要提供模板，不仅仅为了遵循
IAB的规范，还因为大多数网页都是使用的这几种布局方式。
使用嵌套布局
YUI Grids CSS提供了一套机制来让你轻松实现嵌套的布局。使用该技术，你可以轻易地将页面主体部分再细分成两列等，进而能够实现更加复杂的布局方式。
基本思路
实现嵌套布局的基本思路是，每个grid都可以作为“单元”的父容器。标准的容器需要制定class为yui-g，内部的单元部分为class=yui-u的div。这样就实现了一个容器包含了两个单元部分，并且这两个单元部分各占据50%的宽度。例外情况我们后面再说。代码如下：
...
<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>
...
注意：CSS中的:first-child选择器
深层嵌套
你可以在前面所说的基础上，进行更多嵌套，用来让页面显示出更多的列。（效果页面）在看代码之前，你需要注意两件事情：1、如果一个子单元本身又是一个包含子单元的容器，那么不要将其指定为单元，仍然要用容器来制定他们。2、请确保让每个先出现的单元都拥有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>
...
Using Nesting Grids
太累了，不翻译了，以后再说。
分享到：
相关推荐
在YUI Grids CSS中，通过使用em单位，我们可以确保当用户改变浏览器的字体大小时，网页的宽度也会相应地调整。例如，如果将页面宽度设置为750像素，可以使用13像素的字体大小来计算对应的em值。在非IE浏览器中，我们...
在这个例子中，左中右三个模块的划分，正是通过YUI的Container组件和Grids CSS实现的，它们使得页面结构清晰，代码可读性强。 接下来，我们要讨论的是YUI的模块化设计。YUI遵循了“按需加载”的原则，这意味着...
芒果曾经介绍过由雅虎开发小组推出的 YUI，而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一，YUI Grids CSS 提供了四种预设页面宽度，六种预设模板。其中的负 Margin 技术，使用度量单位 em，...
比如： * typography.css 字体排版规则 * grid.css 表格布局 * layout.css 布局 * form.css 表单 * general.css CSS常规设置 下面是一些不错的CSS框架，推荐...很不错的框架，基础的YUI Grids CSS提供4种页面宽
这些CSS框架各有特色，有的专注于网格系统，如960 Grid System和YUI Grids CSS，有的强调简洁性和可读性，如CleverCSS，还有些如Emastic和Elements，提供更加全面的解决方案，涵盖工作流程和设计元素。选择合适的CSS...
4. **YUI Grids CSS** - YUI是Yahoo!公司推出的前端框架，其Grids CSS用于创建灵活和响应式的网格布局。 - 适用于需要高性能和高质量前端设计的大型项目。 5. **Clever CSS** - Clever CSS是一个利用CSS的语法...
YUI的CSS组件提供了预定义的样式和布局解决方案，如Grids布局系统，使得网页布局变得更加简单。它还包括了诸如Button、Form、Menu等UI元素的样式，使得网页设计风格统一且易于定制。 **3. JavaScript组件** - **...
2. **响应式设计**：YUI提供了响应式设计工具，如Grids布局系统，能根据屏幕尺寸自动调整页面布局，适应各种设备。 3. **事件处理**：YUI的事件系统强大，支持事件绑定、解绑、事件冒泡等，使得用户交互编程简单易行...
3. **CSS组件**：YUI提供了丰富的CSS样式库，如Grids（网格布局）、Buttons（按钮）、Forms（表单）等，使得界面设计更加统一和规范。 4. **Widget系统**：YUI 3的Widget系统是一套强大的UI组件，包括了如...
- **Event需要的引入**：通常需要先引入YUI的Event模块才能使用这些工具。 - **Event工具集提供的方法**：包括`YAHOO.util.Event.addListener`, `YAHOO.util.Event.removeListener`, `YAHOO.util.Event.on`, `...
本程序的最大特色是没有使用数据库，适合小型站点使用。 作为一个轻巧灵便的文本留言板，枫叶留言板提供了更便捷的使用方法。 使用它，您可以： ...8.使用了YUI Grids CSS 和 blueprint 9.实现了首页 ajax 刷新
3. **CSS样式和布局**：YUI包含一套响应式设计的CSS框架，如Grids布局系统，帮助开发者快速创建响应式的网页布局。 4. **数据管理**：YUI提供了Model、ModelList和Store等组件，用于数据的存储、管理和同步，与...
2. **响应式设计支持**：在YUI 3.0.0中，雅虎增强了对响应式设计的支持，提供了多种工具和组件，如Grids布局系统，帮助开发者创建适应不同屏幕尺寸和设备的网页。 3. **事件系统**：YUI 3.0.0提供了一个强大的事件...
6. **布局管理**：讨论YUI Grids和Layout Manager，用于构建响应式和自适应的页面布局。 7. **性能优化**：介绍如何利用YUI工具对JavaScript和CSS进行压缩，提升网页加载速度。 8. **示例和实践**：提供实际代码示例...
4. **CSS样式工具**：YUI包含了CSS Reset和Grids，帮助开发者快速创建整洁、响应式的布局，减少了样式冲突问题。 5. **数据绑定和模板引擎**：YUI的数据绑定功能允许开发者将JavaScript对象与HTML元素进行绑定，...
在压缩包文件名称“pure-css-pure-94cae66”中，“pure-css”是项目名称，而“94cae66”可能是该版本的Git哈希值，通常用于追踪代码库中的特定版本。这表明下载的是Pure CSS的一个特定版本，而不是最新的开发版本，...