Yahoo!YUI Library CSS Tools雅虎中国优化版演示

术语详解

#doc
整个文档，定义的是整页的宽度
.yui-t
t, 即template, 模板，定义的是页面的整体结构
#yui-main
模板内的主区块
.yui-b
b, 即block，模板内的区块
.yui-g
g, 即grid，网格
.yui-u
u, 即unit，网格内的单元格
.first
用于网格内单元格的第一格

页面结构

<body>
<div id="doc?" class="yui-t?">

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

无需更改结构，请按需求，参考右边的演示说明即可把页面结构搭建起来。第一步，确定页面的宽度，改变doc；第二步，确定布局，改变yui-t。

如何自定义宽度

其中.yui-tc和.yui-tc2用以自定义宽度布局。

  1. .yui-tc

    窄栏在左的定义。需要自定义的宽度（例子中以280px为例）参考以下写法：

    .yui-tc .yui-b {width:280px;}
.yui-tc #main .yui-b {margin-left:290px;}

  2. .yui-tc2

    窄栏在右的定义。需要自定义的宽度（例子中以130px为例）参考以下写法：

    .yui-tc2 .yui-b {width:130px;}
.yui-tc2 #main .yui-b {margin-left:140px;}

如何区块间（栏间）距离

默认的间距是10px。如需改变，请在你的CSS文件中使用 .yui-t? #yui-main .yui-b {margin-left/right: ?px;}覆盖默认设置即可。比如，我们需要.yui-t1的间距是20px，则在自己的CSS文件中定义以下样式即可：

.yui-t1 #yui-main .yui-b {margin-left:200px;}

网格结构

两格

<div class="yui-g?">
	<div class="yui-u first"></div>
	<div class="yui-u"></div>
</div>

用于yui-g, yui-gc, yui-gd, yui-ge和yui-gf.

三格（特殊网格，只存在于.yui-gb中）

<div class="yui-gb">
	<div class="yui-u first"></div>
	<div class="yui-u"></div>
	<div class="yui-u"></div>
</div>

四格（特殊网格，为对分两格的嵌套扩展）

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

演示

页面宽度

  1. #doc - 770px
  2. #doc2 - 950px
  3. #doc3 - 百分百，两边有10px外边距
  4. #doc-custom - 自定义宽度

模板

  1. .yui-t1 - 两栏，左边160px
  2. .yui-t2 - 两栏，左边180px
  3. .yui-t3 - 两栏，左边300px
  4. .yui-t4 - 两栏，右边180px
  5. .yui-t5 - 两栏，右边240px
  6. .yui-t6 - 两栏，右边300px
  7. .yui-t7 - 单栏，铺满
  8. .yui-tc - 两栏，窄栏在左边，自定义宽度
  9. .yui-tc2 - 两栏，窄栏在右边，自定义宽度

网格

  1. .yui-g - 标准均分网格（如需再均分，请嵌套）
  2. .yui-gb - 1/3 - 1/3 - 1/3
  3. .yui-gc - 2/3 - 1/3
  4. .yui-gd - 1/3 - 2/3
  5. .yui-ge - 3/4 - 1/4
  6. .yui-gf - 1/4 - 3/4

说明

基于YUI Library V2.2.0 CSS Tools的grids修改而成。由于中文环境的特殊性，去除了原YUI布局、字体的缩放功能。增加.yui-tc和.yui-tc2，以便适应自定义的需要。

YUI Library CSS Tools思想比较先进，页面的元素（id,class的安排，网格的应用等）安排比较合理，如能推行将能极大提高页面产出效率。不仅如此，因为每个人的写作风格差异较大，如能统一使用YUI的思路，相信，无论是新手还是老手，维护的成本将会更低。当然，这不是要扼杀个人的创造性，但这确实是效率、协作、商业化的最佳方式。

压缩后的.yui-cn-min.css仅2.18k.

© 2007 UED of Yahoo! China