Bryan Veloso 在最近在他重新发布的网站Avalonstar 上应用了960网格系统（960 Grid System）中的16列的PS模板开发.在这同时感谢他给960.gs提供了网站的截图以供使用。网站：

      正如你们所知，我最近正为一个CSS框架（此框架是应本人最近的个人的专项需求所开发的）建一个站点。由于一直没想到更好的名字，再说960这个数字凑成的logo还不错，所以简单的叫做960 网格系统（960 Grid System）。

佛山网站建设_佛山网站制作_佛山网站设计_佛山网站_佛山网页设计_佛山网页建设_佛山网页制作

   这很有趣，因为我只是在星期天网上临睡前上tweet发了一条关于960网格系统的信息，然后就收到很多评论，甚至收到了很多咨询相关信息的邮件。

      应该特别指出的是，这个180KB大小的下载包，不仅仅是CSS框架，它包含了一下文件：可打印的缩略图表，针对Firewofks,Phototshop，OmniGraffle 和Vision的模板文件，CSS文件，HTML文件。

960.css文件经压缩后大小只有4KB。

      首先，我写本CSS框架自是为了我自己的项目，同时只是为了过把设计的瘾。我十分清楚并不是所有人都会喜欢它。有这么句老话——你要么满足全部人某一时段的需求，要么满足一部分人的永远的需求。我并不打算那样做。我只是想将我过去一年多所关注的网格方面的东西跟大家分享。假如有人能因此而有所收获，那是件好事。

浏览器支持

      本框架代码适用于所有由yahoo评为A级（A-grade）的浏览器。本文发文时间，yahoo对浏览器的评定情况如下图所示。

开发背景

      我开始对网格设计产生兴趣是在看了 Khoi Vinh 和 Mark Boulton的文章之后。我承认，一开始我并不十分理解他们文中的概念，但是后来，经过不断的思考，终于了解到这是一个在web网页页面设计领域内经得起时间考验的实践总结。不管你喜欢还是不喜欢，现今的网页大多都是以一个个四四方方的“块”组成。不可避免的，页面设计上也用各式长方形通过不同的组合来达到目的。

      竟然我们要使用这些四四方方的东西，那么我们应该对它们有个逻辑性的认识。有次在完成Khoi和Mark安排的初步工作后,偶然发现了Cameron Moll的文章，文中说到，960px是网页设计的最佳宽度。现在基本上显示器都支持1024×768的分辨率（就像支持以前的800*600那样），而在这个分辨率下，960px的宽度的确能够非常好地展现网页的内容。

      自从看了那几篇文章以后，我在设计中开始应用这个布局方法——将960px分成若干列。直至2007年春，可以这样说，我发现了我的一套规律。这个发现导致我开始了我个人网站的重构，工作还在进行中，不过进度很快。假如你看我瞄我一下，发现了我正在吃我的“狗粮”，在此同时，我的网站已经用上了新版本的16列网格布局。

      我现在还不能好好坐下并完成重构工作，因为我还得完成硕士学位相关的信件，还有需要完成接到一些私活等等。按时间顺序来说，技术上我已经在Blueprint发布之前开始使用我网格系统了。这个说法其实没什么很大价值，只是帮我解释了“为什么使用另外一个网格框架？”，因为我已经在一个项目里用Blueprint。为了减少这个项目日后的维护成本，我们要使用一个已有的代码库。尽管我们在编写代码前已经商定按Blueprint的约定出发，但相关的设计人员并没有从Blueprint的层面出发来设计布局。当然，这也有一部分责任在我，在开发前我并没有与他们充分的交流Blueprint工作方式。在项目的最后阶段，我基本上将所有的按Blueprint框架写的代码换回了用table布局。

      这时候我在想，如果有那么一个精简的东西能让网页设计者和编码者思维更活跃，沟通更顺畅，岂不乐哉？而且，要是执行机构包含在该工作流中呢？960网格系统应运而生！

      到目前为止，我收到的邮件大部分的问题都是“你个这个跟Blueprint哪有什么不同”，这些绝大部分都是很愤恨的说，就像在说“简直浪费你的时间，因为Blueprint已经存在，我更喜欢Blueprint，你回去吃奶吧。”一样。

      对于这部分人，我想给点欢呼声，你们大可以继续使用那些你们认为最适合的，最熟悉的框架。我可不愿意挑起矛盾，强迫大家使用这个框架，而不去使用那个框架，尽管这个框架是更值得用的。

      它有着明显的缺陷，或者有不少优秀的功能，这全在于你怎么看待它。这就决定了（或不决定）960网格系统的架构方式。系统中包含样式表text.css，它的存在主要是为了保证绝大部分的页面设计中，开发者可以快速定义原型，常用模块如头部文件，段落和列表的基本样式。

      我没有脱离我原有方向而去做像在ALA（ALA全称是A LIST APART,著名的前端开站点）官网中用来描述入门文章所用的那种竖排文字的效果。这并不意味着我感觉这种竖排的效果无效，而实际上，我清楚看到这个效果的价值所在。我认为这是一个棒极了的点子，是我崇高的追求。然而它是极其脆弱的，假如通过内容编辑器上传了任意大小、173px高的图片，那在它之后的网页元素就都会被打乱。

      我同意它是众多解决方法中的一个，而其他则更需要去规范化。事实上，当一个网站页面设计完成的时候，绝大部分的内容都会独一无二的固定下来。我特意没有去设置文字和页面背景颜色。你也可以说我懒，但是这正是在使用Blueprint时所领悟到的，我必须坚持下来。我可不希望到时有人会说：“为什么这个<th>有背景色？”。

      我也没有加入例如图片，引用内容等样式，这是因为我很少用到。再者我考虑到这样会比那种布局和原型相关联的框架更具可设计性和更具内容导向性。现在能使你轻易的写一个一次性的属于你的样式表了。

      因此，假如我的网格系统并不如你想象的那样，我希望你们原谅我。尽管我很喜欢披头士，而且我不会手下留情。

正文

       简单的说了下960网格系统不去做的内容之后，我们来强调一下该系统的基本特性。首先，对于热爱linux的用户。在linux系统里默认的字体顺序是这样的：Helvetica, Arial, Liberation Sans和FreeSans，还有通用的sans-serif。

      在Ubuntu系统里，我发现它使用的默认字体san-serif 的宽度更接近Verdana （相比于Helvetica 和Arial）。这并不是很大问题，但是如果你需要让你的页面在各种浏览器上表现一致的话，你要做的不仅仅是为linux用户选择一个通用的字体。假如你按某一大约宽度的字体来确定块的大小的话，这显得相当重要，仔细观察下，页面很可能在换行的时候出现问题。

      当我将此问题跟我朋友Yannick说了后，他建议我使用在Fedora和Red Hat 两款Linux操作系统都默认使用的Liberation Sans字体。同时它也可以在通用公共许可证的保护下简单自由地获得，如此的与众不同。假如非让我去描述它，我可以说改字体里数字像用了Verdana，而其他则像用了Helvetica。

      在读过 Jon Christopher’s 的文章后，知道FreeSans最接近Ubuntu下的默认字体 Helvetica。因此，在text.css的font-family下的设置是页面字体同时适应MSX（MAC OS Ten）,Windows和基于Linux的系统。

调整与间隔

      在我们书生气十足的要为字体的像素数惊醒大辩论的之前，且听我说，我暂且将此按下不表。我十分清楚你们的论点，甚至在做更富有弹性的页面是参考了你们的观点。对于我来说，这就是重复投资。你可以花上无数小时在考虑字体的大小，继承问题，就像我当时做Geniant Blog那时一样，或者你可以在以后都一个个像素的调整。

      我发现Blueprint上文本字体使用了12px，但是YUI（Yahoo user interface）的fonts.css将文本文字定义为13px。除了对他们按百分比的调整方法有异议之外，我确实非常喜欢他们实现排版的方式。我们已经将这些运用在Geniant Blog上，以实现更好的效果（虽然这个工作耗费了很多时间精力）。

      当我不得不小心点设置一个垂直的基线时，可以选用body中文本字体大小是13px，算上1.5倍行高（line-height）则是19.5px。绝大多数块级别的元素的底部边距为20px。这样一来，你非常容易就得到了一个一致的基准线。这只需要调整标题的行高而已。

      有两个块级别的元素我没有将设置它的底部边距，它们分别是blockquote 和form。在strict文档类型定义里面，要求所有其他的块级元素都在它们里面。比如：paragraph标签在blockquote里面，或者fieldsets标签在form里面。尽管它不可以设置什么边距，但是那些块级的子元素可以整齐的排列在里面。

      我已经将list元素设置为左缩进30px，假如你要顶端对齐，则将缩进像素数归零。我实际上认为对齐了标点符号是相当酷的，但还没有碰到有这种需求的顾客，于是我在在CSS文件中对应的地方改掉了，以免产生不必要的争论。

      我只是简单的再说下这观点，这观点相当普遍。尽管我个人认为Eric Meyer将reset.css中的":focus"移除的确是使页面更美观，但我想保留焦点的边框才是正道，因为有部分用户是使用键盘来点击链接的，而非鼠标。

      为了让代码兼容Opera浏览器，代码编写上花了较长的时间。这是因为Opera浏览器中根本就没有类似:focus这样的不标签。不管怎么说，假如你希望你的链接看起来更简洁一点，你可以将text.css中的a:focus去掉，同时你要知道你的操作将会使你设计牺牲了网页的到达无障碍性。

      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>这类的标签里，就可以让对应内容“消失”。唯一的影响就是它同时会消除浮动。

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

使用许可

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

尾声

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

      近期计划做一个教程，关于“如何通过jQuery添加样式hooks来控制网页元素”，因为近期做过这类型的东西，有经验想跟大家分享。我不认为JS应该出现在CSS框架里面。所以这是个独立的教程系列。