使用960网格系统(960 Grid System)设计网页

<!-- Feedsky FEED发布代码开始 --> 如果您喜欢这些文章，欢迎点击此处订阅本Blog <!-- FEED自动发现标记开始 --> <link title="RSS 2.0" type="application/rss+xml" href="http://feed.feedsky.com/softwave" rel="alternate"> <!-- FEED自动发现标记结束 -->

<!--Google 468*60横幅广告开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "image"; //2007-07-26: CSDN google_ad_channel = "6063905817"; google_color_border = "6699CC"; google_color_bg = "E6E6E6"; google_color_link = "FFFFFF"; google_color_text = "333333"; google_color_url = "AECCEB"; google_ui_features = "rc:6"; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--Google 468*60横幅广告结束-->

CSS框架已经出现很长时间了，关于这些框架的用处也被我们讨论了很多遍了。有人说，CSS框架不够先进，还有人说这些框架大大的节省了他们的开发时间。在此，我们将不再讨论这个问题。

前段时间，我了解到了CSS框架。经过对Malo、BluePrint和960做了实验对比后，我得出一个结论：我最喜欢960CSS框架。

本教程将解释这个框架的基本原理，这样你就可以用960来快速进入开发。（注：960网格系统官方网站 点击进入 ）

基本原理

你必须知道一些基本原理来“ 学习这个框架是如何工作的 ”。你可以通过实验（或者是用firebug）来学习它，不过我也将会在这里为你介绍它。让我们开始吧。

不要编辑960.css文件

首先是一个小提示：不要编辑960.css文件，否则，将来你将不能更新这个框架。因为尽管我们需要布局我们的HTML，我们将创建一个独立的CSS文件。

加载网格

因为我们可以使用一个外部文件的CSS代码，我们必须在我们的HTML网站中加载它们，我们可以通过以下代码来实现：

这些做好了之后，我们必须添加我们自己的CSS文件。例如，你可以叫这个文件为 style.css 或 site.css 或者其它任何名字。用下面代码引用这个文件：

容器

在960框架中，你可以选择名为 .container_12 和 .container_16 的两个容器class。他们都是960px的宽度（这就是为什么叫960），它们的不同是分的列数不同。 .container_12 被分割为12列， .container_16 被分割为16列。这些960px宽的容器是水平居中的。

网格/列

有很多列宽可供选择，而且在这两个容器里，这些宽度也不相同。你可以通过打开 960.css 文件来查看这些宽度。但是这对于设计一个网站来说是不必要的。有一个小技巧可以让这个框架更加易用。

比如，你想要在你的容器里建两列（叫sidebar/content）。你可以这样做：

可以看到，你的第一列（grid_ 4 ）的数字加上第二列（grid_ 8 ）的数字正好是 12 。也就是说，你不必知道每一列的宽度，你可以选择列宽通过一些简单的数学计算。

如果我们要建一个4列的布局，代码可以是这样的：

正如你所看到的那样，这个系统依然很完美。但是如果你想使用嵌套的列的话，你会发现它是有问题的。比如，如果后面三列都属于content列：

你会发现这错位了，不过不用着急，这正是我们下一节要说的。

间距

默认情况下，每列之间都有间距。每一个grid_（这里代表数字）class左右都有10个像素的间距。也就是说，两列之间，总共有20px的间距。

20px间距对创建一个有足够宽的空白间距的布局来说是很棒的，它可以让一切看起来很自然。这也是我喜欢使用960的原因之一。

在上面的例子中，我们遇到了个问题，现在我们就来解决它。

问题是，每一列都有左右边距。而嵌套的三列中，第一列和最后一列是不需要边距的，解决方法是：

我们可以简单的添加” alpha “样式来去掉左边的间距，添加“ omega ”样式来去除右边的间距。这样我们刚刚创建的这个例子在任何浏览器里面就很完美了（当然包括IE6）。

样式

好了，你现在已经完全了解如果用960框架来创建一个网格布局的基本原理了。当然，我们也可以添加一些样式到我们的布局中。

因为CSS使用特性来确定哪一个样式声明具有高于其它样式的优先级。” id “比 class 更重要。

用这种方法，我们可以在自己的文件中重写那些被class设定的规则（比如宽度，padding，边框等）。

补充

以下是我做的一个简单的测试页面，代码如下：

以下是960官方的实例文档，可以看看它的网格是如何写的：

<!--新Google 468*60横幅广告开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x60, 创建于 08-8-6 */ google_ad_slot = "7368701459"; google_ad_width = 468; google_ad_height = 60; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468*60横幅广告结束-->

<!--新Google 468x15 横链接单元开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x15 横链接单元 */ google_ad_slot = "5785741422"; google_ad_width = 468; google_ad_height = 15; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468x15 横链接单元结束-->

<!-- Google Reader shared发布代码开始 --><script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script><script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&amp;callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script><!-- Google Reader shared发布代码结束 -->

使用960网格系统(960 Grid System)设计网页