960 CSS框架解析及重构

960 CSS SYSTEM

960CSS框架是一个非常流行的CSS框架,它是国外最成熟的CSS框架之一,而且结构清晰,代码简洁,容易上手。

960的基本原理是网格技术,而且960是CSS 网格技术的最完美实现。

网格技术是最近两年才出现的一种网页布局方法,它的原理是将页面平均分割成N列,然后通过组合相应数量的列来完成对页面的布局。

关于网格技术的更多信息,请查看我之前写的《美丽网格》。

960的方法是,将页面平均分成12列或16列,然后列与列之间是完全独立的,每一列的marginpadding都是相同的,这样,每列之间就不会出现那些常见的bug。

BluePrint和YUI也有网格技术,但是它们的列与列之间的空白,是通过单边的margin来实现的,这样就需要在第一列或最后一列添加额外的样式。

然而,我之前也有一个关于网格框架的想法,后来发现与960差不多,而且在某些方面,它的实现比我的设想要好些。但是它也有点儿方法我觉得不是太 好,重用度不够,比如,对于每列的公用样式,它是通过.grid_1,.grid_2,.grid_3, …… .grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}这 样的写法来实现的,我认为不如将这个公用的样式独立出来,写成另外的一个样式,而每列的class,只负责控制列的宽度就行了,这样比较灵活而且更简单, 更易于理解和使用。

于是我将部分代码重写了一下,发布在这里了。这个页面提供了下载链接,如果有人觉得好用,可以下载下来用。

最大的改变就是添加了个公用类column。

另外,值得一提的是,960的样式里面提供了两种清除浮动的方法,一个是.clear类,一个是著名的.clearfix,我联系了下作者,他的解释是,自己比较喜欢用clear的方法,但是同时提供两种方法供大家选择。