网页栅格系统研究:蛋糕的切法(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
  • asp之家 网络编程 m.aspxhome.com