网页栅格系统研究:蛋糕的切法
作者：玉伯 来源：Taobao.com UI Team 发布时间：2008-10-24 17:07:00
首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。
有个很有意思的网站是Yahoo!, 看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能摇身一变自适应宽度了：
#page {
width: 70em;
}
为什么Yahoo!最后选择了定宽布局呢？这很可能是因为定宽布局比宽度自适应布局更容易控制。对于结构复杂的网站来说，可维护性和可扩展性非常重要。Yahoo!是以信息展示为主的门户型网站，960的宽度对于信息的阅读比较友善（Joe Clark写了一篇屏幕阅读时有关行长的有趣文章）。种种因素使得Yahoo!最后采用了定宽布局（Tommy Olsson总结了 每种布局设计的优缺点 ）。
这里将只关注定宽布局，适用的场景是搭建复杂的门户型网站。对于宽度自适应布局和相应的栅格系统，暂不讨论（根据实现的技术手段不同，宽度自适应布局又分为流体布局和弹性布局。我个人蛮喜欢弹性布局，以后有时间再研究）。
好了，已经将范围缩小到定宽布局的网页栅格系统，那我们开始吧。
并不遥远的750
还记得800×600的显示器不？虽然才时隔几年，感觉却好像是上个世纪的事了。Mark Boulton做了 最早的探索：
将750分割成均等的6份，这就形成了栅格系统，稍加组合划分就形成了两栏布局和三栏布局。Mark Boulton还研究了Gutter（垂直栏之间的间隙）对栅格的影响，有兴趣的可以阅读原文，或者跟着我往下看吧，下面将详细阐述。
几个术语和一个公式
一个标准的栅格系统，包括以下部分：
将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式：
W = c * N + g * (N - 1) + 2 * m
一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：
W = c * N + g * (N - 1) + g = (c + g) * N
将c+g标记为C, 公式变得非常简单：
W = C * N
上面的公式就是栅格系统的基础，很简单吧。
0
投稿猜你喜欢
在 Web 编辑器领域，CKEditor – 七年的专注，赢取的是王者风范。TinyMCE – 五年前的小家碧玉，如今已成长为大家闺秀。Go- 2009年 6月6日,空间4岁啦！与此同时Qzone月登录用户2亿，同时在线用户也突破了1000万。这是让人欢欣雀跃的数字，在空间同事眼里，
- 斜角导航条看上去立体感比较强，但实现起来比较麻烦；这是前几天写的一个测试代码，实现时，本来想用简单的图片加负数来实现；但GIF图片对半透明的
- 常见的双倍边距类问题都遇到过，但很少遇到这种有意思的，所以记录一下。这个BUG是发生在Standards模式下（就是包含XHTML或者HTM
- 也许已经有人发现可以这样写...CSS代码部分a.info { position:
- 一.基本的查询语句，特殊符号||。制定列的别名AS，唯一标示distinct1.字符连接符“||”与“+”符oracle：select &n
- javascript的分号代表语句的结束符，但由于javascript具有分号自动插入规则，所以它是一个十分容易让人模糊的东西，在一般情况下
- cooper谈到用户的视觉路径一般是：从上到下，从左到右。好的视觉设计路径应该是顺应这样的用户习惯，糟糕的设计会让用户无所适从，焦点到处都是
- 代码如下:'===================================== '转换内容，防止意外 '==
- 1，FCKeditor 编辑器最新版本: 2.3.1站点：http://www.fckeditor.net 演示：http://w
- 减少HTTP请求，是可以提高网站速度的，把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和backgr
- 一位资深的设计师曾经向我抱怨，说老板不仅让他做“设计”工作，还让他做“制作”工作，真是很烦。言下之意，“制作”还要一个资深设计师亲自上阵，未
- 可以查看mysql文件目录my.ini文件，可以找到类似于 datadir="D:/beeagle/Program Files/M
- 该域名查询系统写的很简单，只是实现了功能使用XmlHttp来获取远程查询结果，实际上就是小偷程序！相关推荐：域名注册情况查询/
- 这个问题困扰了我很长很长的时间，在跨域获取数据的时候就要用到服务器端的对象，以前一直用的是Msxml.XMLHTTP。但是问题太多了，特别严
- 从今天开始起，基督山将和大家一起进入ASP.net 诸多程序的学习中，老实说，.net到底是法宝还是垃圾，我们拭目以待。有任何问题，联络基督
- 在项目开发中，经常出现这样的需求。在新增或修改一个主表数据时，对应的从表也要进行同步，此时我们是怎么操作的了？典型的方法就是对于主表的各数据
- ASP有一个最重要的功能，就是它可以让你非常轻松地连接数据库。通常都是和一个Access或者一个SQL数据库相连。因为Access是最容易起
- <％Dim sc4Json Sub InitScriptControlSet sc
- 工作闲余，除抱有浓厚兴趣领域，我很不喜欢看些晦涩难懂的文字，于是想像茶余饭后的闲聊，随谈点话题。一次和一朋友吃饭聊天，随便聊到了他最近做的一
