我的栅格系统实现
作者:grace 来源:gracecode.com 时间:2008-09-21 13:50:00
如果没有了解栅格系统是什么,建议看完这篇文章以后再回来。
其实有很种 CSS 写法实现栅格系统,很多 CSS 库也都会提供类似的栅格系统实现(譬如:YUI,BluePrint)。
引用 One True Layout 文中所言,良好的布局应该具有的几个特性:
具有一定的灵活性
等高
基于栅格
请允许我“重复造了轮子”,我的栅格系统实现是基于“伪绝对定位布局”,这样可以更好的实现上述所言的几个特征(很难解释,还是直接看 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
因为是上述“伪绝对定位”的布局,所以相应列之间不会相互影响。而理解上述布局可能需要些时间,同时感谢师兄那么详细的讲解,我相信也会给你带来收获。
黄金分割标准:右边的大小一般是左边大小的黄金比例
平分:在1024的分辨率下,一般采用330左右的分割
两栏分割:左边660 右边260左右
三栏分割:左边是200左右 中间400左右 右边300左右
三栏分割:右边两栏之和是左边的0.618
三栏分割:中间180 两边分别为380左右
很难具体的解释其中的细节,但是希望有问题的朋友能够留言,我尽量帮你解答。
标签:栅格,系统,设计,布局
0
投稿
猜你喜欢
一些SQL查询语法参考
2007-10-14 11:56:00
日式酒店电梯面板设计
2008-06-08 13:23:00
Mootools常用方法扩展(二)
2009-01-11 18:22:00
使用javascript修复浏览器中12个常见而又头痛的问题
2008-10-28 19:38:00
CSS的书写顺序规范
2008-06-12 13:51:00
详解MySQL数据库中Show命令的用法
2008-11-27 16:04:00
写给JavaScript库开发者们的规则
2008-10-26 12:30:00
谈谈网页设计中的字体应用 (2) serif 和 sans-serif
2009-11-24 13:04:00
简单的文本内容处理工具
2010-01-28 12:31:00
ASP中的Debug类--VBScript
2008-10-24 09:38:00
Mootools 1.2教程(4)——函数
2008-11-18 15:36:00
ASP中RegExp对象正则表达式语法及相关例子
2007-08-12 17:46:00
如何实现让每句话的头一个字母都大写?
2010-05-24 18:26:00
在oracle 数据库查询的select 查询字段中关联其他表的方法
2009-08-31 12:27:00
CSS压缩:技巧与工具
2009-12-11 18:26:00
如何调用Oracle存储过程?
2009-11-15 20:13:00
css清除浮动的最优方法
2008-04-25 22:33:00
使用SqlBulkCopy时应注意Sqlserver表中使用缺省值的列
2012-07-11 15:34:35
王孟友教你如何设计标志(LOGO)
2008-04-17 13:30:00
基于PHP做个图片防盗链
2023-05-25 00:27:30