YUI中的css——Grids.css

1,grids.css中页面布局的宽度用的是em宽度,是因为em会随着用户调整字体的大小(查看-文字大小)而改变宽度,从而有更好的用户体验;

2,根据reset.css,页面字体大小为13px,所以页面宽度也要根据13px来设置em,但是,在ie中有点问题,如果在firefox等标准浏览器中字1em为13px的话,在ie中要13.3333px,而且用*过滤器来设置ie中的em宽度。如在body字体大小为13px的情况下设置页面宽度为600px,在ie中为45.00em,而在firefox等标准浏览器中为46.15em。

3,注意(来自http://developer.yahoo.com/yui/grids/)

Note:

   Here are some other things to keep in mind: 1) The width is set in ems because ems scale with user-initiated font-size adjustment, and therefore provide a superior user experience. 2) YUI Fonts does a good job of normalizing the width of an em, but we're still obliged to provide a slightly different value for IE. 3) Be sure the width value for IE comes after the value for everybody else. 4) Setting the min-width is optional, but helps the grid maintain integrity as the viewport shrinks. 5) The text-align and margin are used to help center the page, and should not be modified.

4,
模板类 预设描述
.yui-t1 左边160px的边栏
.yui-t2 左边180px的边栏
.yui-t3 左边300px的边栏
.yui-t4 右边180px的边栏
.yui-t5 右边240px的边栏
.yui-t6 右边300px的边栏
5,
特殊的内部类 预设描述
.yui-gb 1/3 - 1/3 - 1/3
.yui-gc 2/3 - 1/3
.yui-gd 1/3 - 2/3
.yui-ge 3/4 - 1/4
.yui-gf 1/4 - 3/4
posted @ 2008-06-15 22:22  慢热君Kevin  阅读(1240)  评论(0编辑  收藏  举报