960网格系统（5）

列

960网格系 统中与Blueprint有着不少大不相同的地方，除了命名规则不一样外，还有各列获得各列之间的间隔的方式也大不相同。在Blueprint中，每个列 直接的间隔都是10px（对我来说，觉得太少了），而且都是在列的右边。每行的最后一列要用class=”last”来去掉它本身的右边的间隔。这意味着 不管在容器的左边还是右边，都必须会有空隙。在大多数的情况下，这不会有什么大问题，但是如果如果用户的使用了特殊的浏览器，实际上使用Chrome浏览 器时就会显示出不正常。

在960网格系统里，每一列都是左右各有边距10px，这是考虑到有些容器会留有10px作为边上的缓冲，而且列与列中间的宽度会达到20px，还有一个就是：没有必要在每行最后一列额外的指定class来清除多余间隔。

在少数情况下，你可能需要将一个网格嵌套在另一个网格里面。在这种情况下，你需要用class=”alpha”,用在嵌套在里面每一行的第一个网格，用class=”omega”在嵌套在里面的网格的每一行的最后一个网格。这稍微增加了你工作量，但是这就是比较边缘的情况，并不会出现得太多。

我特地选用了这样一种方式约定命名规则，使用grid_xx,出于以下几种考虑，假如用span-xx这类会容易把人弄糊涂，因 为<span>,<td colspan=”x”>和<colgroup span=”x”>在HTML标签早已存在了。我想只有在这几个标签或属性没有被使用的情况下我才选择这个命名规则。同时我也不喜欢一而再的用这种 ——class=”column…”，虽然这个方法是不错的，但是Bluprint那伙人在最近的项目中把这个东西用滥了。

你通过给网格样式用prefix_XX 或者suffix_XX组合控制，就可以很容易的在每个单元网格的前面或后面添加空白的列（栏），这很像Blueprint。命名规则其实是按个人喜欢，就像我确实很容易就被诸如“Append”这些词搞昏头，所以还是少惹它为妙。

IE浏览器

今天又不少人问我有关960网格系 统的IE兼容的问题，还有压缩包里面为什么ie.css这个文件？简单的说，本系统根本不用进行修补来适应IE浏览器。IE6有个顽固的问题，就是在任何 浮动的元素的margin显示上都会是控制上的两倍。或者这是个大问题，但是在那些浮动的元素样式控制上添加display:inline后能很好地解决 这问题。这方法对其他浏览器也没有任何副作用，所以在在主样式表——960.css里很容易找到这段代码。

你也许也会发现<hr />在IE6和IE7下，在画出的横线的四方都会有些空隙，其中上下各有大概7个像素的空隙。通过调节<hr />的margin属性很容易解决这个问题。对于我来说，这个问题还可以接受，并不值得通过再加css控制来修复它。假如你非要给解决这个问题的 话，你单独写个css来兼容IE浏览器吧，记住，要单独写个css文件和做好标注。

清除元素

最后一点，我想说说960.css中的清除元素的方式。这是我个人最喜欢的部分，通过添加极少数标签就可以清除任何元素。由于我之前已经大篇幅说过 了这问题，这里就不再展开细说了。基本上，通过添加“class=”clear””在对应的你希望消除的<span>或者<div& gt;这类的标签里，就可以让对应内容“消失”。唯一的影响就是它同时会消除浮动。

对于一些不想将自己HTML代码弄得“如此混乱”的人，其实还有其他清除的方法——你可以通过CSS来增加标签，而这种方法已经有非常丰富的文档可参考。实际上，通过添加class=”clearfix”到元素里，是清除元素后方的内容。

使用许可

整个源代码压缩包是完全免费的，许可发布遵循GPL和MIT。其实我也不是非常清楚这两个东西，按我理解遵循这两个许可证发布协议以为着你可以将我的代码用在任何情况下（商用或者自用）。在这我尤其要感谢我的朋友Michael Montgomery ，感谢他那些不是很专业的建议，感谢他帮我在各种法律术语之间理清了思路。他白天是个有资质的律师，晚上则是网络武士，帮我修饰960网格系统的文字资料。

尾声

好了，伙计们，就这样了。真心希望960网格会对你们的画草图，搭建框架，网页设计/编码等工作有所帮助。