网页栅格系统研究:蛋糕的切法(2)
作者:玉伯 来源:Taobao.com UI Team 时间:2008-10-24 17:07:00
950的来历
具体应用时,Margin其实是一个空白边,从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960,分割成6列时,栅格如下图:
上图的处理是左右Margin各为5px. 也可以将Margin集中放在一边,比如右边:
无论Margin放在何处(这只影响技术实现,不影响设计),我们真正要关注的是去除Margin之后的部分:
这就是我们要真正关注的950!将W的含义变为去除Margin的总宽度,公式变化为:
W = N * C - g
将上面的公式实例化一下:
950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10
这就形成了960蛋糕的三种常见切法。
12 x 80
16 x 60
24 x 40
标签:网页栅格,栅格,屏幕,布局,设计
0
投稿
猜你喜欢
解密SQL Server数据库系统的编译
2009-03-16 17:33:00
如何列举Error的所有对象?
2010-01-12 20:01:00
《写给大家看的设计书》阅读笔记之对齐原则
2009-07-09 16:32:00
服务器端控件是如何操作的?
2009-11-01 15:22:00
Google中秋logo被恶搞
2007-09-25 15:55:00
纯ASP(VBscript)写的全球IP地址搜索程序
2007-09-27 13:28:00
ASP中汉字与UTF-8的互相转换
2009-06-24 11:15:00
Tag的自定义类
2010-03-18 15:53:00
HTML与javascript中常用编码浅析
2008-12-23 12:20:00
处理SQL Server 2000的命名实例和多实例
2009-01-19 13:28:00
SQL语句更改表所有者
2010-02-04 09:12:00
asp精妙的SQL语句例子
2008-03-04 17:42:00
YUI 学习笔记:Event
2009-02-21 11:15:00
asp金额大小写转换完全无错版
2007-09-26 09:38:00
在ASP中使用SQL语句之5:开始执行
2007-08-11 12:36:00
asp fso type属性取得文件类型代码
2009-02-04 10:09:00
JavaScript 各种动画渐变效果
2008-09-02 10:38:00
JScript 的内存回收
2007-10-16 20:02:00
asp 正则实现清除html文本格式的函数代码
2011-03-09 11:21:00
asp 小偷采集程序原理与常用函数方法
2011-03-06 10:36:00