栅格系统实现

本人转载于:http://www.gracecode.com/archives/2363/

如果没有了解栅格系统是什么,建议看完这篇文章以后再回来。

其实有很种 CSS 写法实现栅格系统,很多 CSS 库也都会提供类似的栅格系统实现(譬如:YUIBluePrint)。

引用 One True Layout 文中所言,良好的布局应该具有的几个特性:

  1. 具有一定的灵活性
  2. 等高
  3. 基于栅格

请允许我“重复造了轮子”,我的栅格系统实现是基于“伪绝对定位布局”,这样可以更好的实现上述所言的几个特征(很难解释,还是直接看 DEMO )。

http://lab.gracecode.com/demo/grid.html

如何使用上面定义的 CSS 栅格?很简单,只需要定义一行内列的数量以后,再定义列占据的相应栅格宽度以及开始位置即可。譬如定义某列占据 17 个栅格、并从第 3 个栅格开始排版,那么使用下面的 class

column-17 start-03

类似的,如果是通栏,那么就是占据 24 个栅格,并从第一个栅格开始(以 Taobao UED 定义的 950px 宽度为公式 W )

column-24 start-01

因为是上述“伪绝对定位”的布局,所以相应列之间不会相互影响。而理解上述布局可能需要些时间,同时感谢师兄那么详细的讲解,我相信也会给你带来收获。

另, 感谢 Missx 提供栅格标准

  1. 黄金分割标准:右边的大小一般是左边大小的黄金比例
  2. 平分:在1024的分辨率下,一般采用330左右的分割
  3. 两栏分割:左边660 右边260左右
  4. 三栏分割:左边是200左右 中间400左右 右边300左右
  5. 三栏分割:右边两栏之和是左边的0.618
  6. 三栏分割:中间180 两边分别为380左右

很难具体的解释其中的细节,但是希望有问题的朋友能够留言,我尽量帮你解答。

posted @ 2010-04-16 10:25  shoupifeng  阅读(284)  评论(0编辑  收藏  举报