您的位置：首页 > 其它

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

2009-01-03 14:23 537 查看

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

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

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

基本原理

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

不要编辑960.css文件

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

加载网格

因为我们可以使用一个外部文件的CSS代码，我们必须在我们的HTML网站中加载它们，我们可以通过以下代码来实现：
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” />

<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/960.css” />

<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” />

这些做好了之后，我们必须添加我们自己的CSS文件。例如，你可以叫这个文件为style.css或site.css或者其它任何名字。用下面代码引用这个文件：
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/style.css” />

容器

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

网格/列

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

比如，你想要在你的容器里建两列（叫sidebar/content）。你可以这样做：
<div class="container_12">
<div class="grid_4">sidebar</div>
<div class="grid_8">main content</div>
</div>

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

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

<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo’s</div>
<div class="grid_2">advertisement</div>
</div>

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

<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_10">
<div class="grid_6">main content</div>
<div class="grid_2">photo’s</div>
<div class="grid_2">advertisement</div>
</div>
</div>

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

间距

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

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

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

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

<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_10">
<div class="grid_6 alpha">main content</div>
<div class="grid_2">photo’s</div>
<div class="grid_2 omega">advertisement</div>
</div>
</div>

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

样式

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

<div class="container_12">
<div id="sidebar" class="grid_2">sidebar</div>
<div id="content" class="grid_10">
<div id="main_content" class="grid_6 alpha">main content</div>
<div id="photo" class="grid_2">photo’s</div>
<div id="advertise" class="grid_2 omega">advertisement</div>
</div>
</div>

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

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

补充

以下是我做的一个简单的测试页面，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TEST Page</title>
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container_16">
<div class="grid_8" style="background-color:#FF0000">
<div class="grid_6 omega" style="background-color:#0000FF">0</div>
<div class="grid_2 omega" style="background-color:#FF00FF">00</div>
</div>
<div class="grid_4" style="background-color:#00FF00">a</div>
<div class="grid_2" style="background-color:#666666">b</div>
<div class="grid_2" style="background-color:#666666">c</div>
</div>
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Travis Isaacs | My Life In Pixels</title>
<meta name="keywords" content="photoshop, wordpress, user experience, ux, uxd, ixd, interaction designer, interaction design, keynote, powerpoint, xhtml, css, web design, mac, time machine, super duper, backup, aperture, canon, 40d, viewzi, viewmix, views, lens rentals, lensrentals.com, infinite scrolling, camera lens rental dallas" />
<link rel="stylesheet" href="http://css.travisisaacs.com/2009/style.css" media="all" />

<link rel="alternate" type="application/rss+xml" title="Travis Isaacs | My Life In Pixels RSS Feed" href="http://travisisaacs.com/feed/" />
<link rel="pingback" href="http://travisisaacs.com/xmlrpc.php" />
<link rel="shortcut icon" href="http://travisisaacs.com/favicon.ico" />
</head>
<body id="The Isaacs Family Christmas Card">
<div id="header">
<div class="container_12">
<a href="http://travisisaacs.com" id="return-home" title="Go back to the home page">The work <span class="amp">&</span> thoughts of <strong>Travis B. Isaacs</strong></a>
<ul id="navigation">
<li id="tab-work"><a href="http://travisisaacs.com/work/">Work</a></li>
<li id="tab-blog"><a href="http://travisisaacs.com/thoughts/">Thoughts</a></li>
<li id="tab-photography"><a href="http://travisisaacs.com/photography/">Photography</a></li>
<li id="tab-about"><a href="http://travisisaacs.com/about/">About</a></li>
<li id="tab-contact"><a href="http://travisisaacs.com/contact/">Contact</a></li>
<li id="tab-search"><script type="text/javascript" language="Javascript" src="http://vfp.viewzi.com/includes/879F-4A21-011D.js"></script></li>
</ul>

</div>
</div>
<div class="ie-center">
<div class="container_12">

<div id="super">
<h1>Hello. I'm <a href="http://travisisaacs.com/about/">Travis Isaacs</a>, and I design great user experiences. </h1>
</div>
<div id="content">
<div id="recent-post" class="grid_8 alpha">
<div class="post">
<h2>
<a href="http://travisisaacs.com/2008/12/13/the-isaacs-family-christmas-card/" rel="bookmark" title="Permanent Link to The Isaacs Family Christmas Card">
The Isaacs Family Christmas Card </a>
</h2>
<div class="post-date">
Dec 13th //
<span class="comment-count">
11 comments </span>
</div>
<p>When planning our family Christmas card this year, my wife and I discuss the option of hiring a professional photographer to take photos of our daughter. However, we thought it would be much more fun and rewarding to do it ourselves.</p>
<a href="http://travisisaacs.com/2008/12/13/the-isaacs-family-christmas-card/" rel="bookmark" title="Permanent Link to The Isaacs Family Christmas Card"><strong>Keep reading »</strong></a>
</div>

</div>
<div id="recent-work" class="grid_4 omega">
<div class="m_group" id="hello">
<p>I'm Travis Isaacs, a designer who dabbles in code, information architecture, and interaction design. <a href="http://travisisaacs.com/about/">More about me</a></p>
</div>
<a href="http://travisisaacs.com/feed/" id="subscribe">Subscribe</a>
</div>
<div class="clear"></div>
<h2>Featured Work</h2>
<a href="http://travisisaacs.com/work/projects/tattoo-information-form/" id="featured-work-img" title="View this project">
<img src="http://img.travisisaacs.com/2009/featured-work-large.jpg" alt="featured work: tatto information sheet"/>
</a>
<div class="clear"></div>
</div>

<div class="clear"></div>

</div>
<div class="clear"></div>
<div class="clear"></div>
<div id="footer" class="container_12">
<ul>
<li><a href="http://travisisaacs.com">Home</a></li>
<li><a href="http://travisisaacs.com/work/">Work</a></li>
<li><a href="http://travisisaacs.com/thoughts/">Thoughts</a></li>
<li><a href="http://travisisaacs.com/photography/">Photography</a></li>
<li><a href="http://travisisaacs.com/about/">About</a></li>
<li><a href="http://travisisaacs.com/contact/">Contact</a></li>
</ul>

<div class="copyright">©2008 Travis Isaacs. All Rights Reserved. </div>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-703764-4");
pageTracker._trackPageview();
} catch(err) {}</script>

<script type="text/javascript">
var _wh = ((document.location.protocol=='https:') ? "https://sec1.woopra.com" : "http://static.woopra.com");
document.write(unescape("%3Cscript src='" + _wh + "/js/woopra.js' type='text/javascript'%3E%3C/script%3E"));
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航