关于使用 960 网格系统进行 CSS 设计的问题答案

【问题标题】：Questions regarding CSS design using 960 grid system关于使用 960 网格系统进行 CSS 设计的问题
【发布时间】：2010-10-18 00:21:26
【问题描述】：

我正在使用960 grid system 创建布局原型。

我想将 Navigation 和 Content 之间的颜色设置为 #000（纯黑色），但我不知道怎么做。我目前得到的是：

使用此代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/custom.css" />
<title>The system</title>
</head>
<body>

<div class="container_16" id="base">
    <div class="grid_16" id="header">Graphical banner</div>
    <div class="grid_16" id="logoutrow">Logout row</div>
    <div class="grid_3" id="navigation">Navigation</div>
    <div class="grid_13" id="content">Content</div>
    <div class="grid_16" id="footer">Footer</div>
</div>

</body>
</html>

我的两个问题：

如何为所有“中间”空间指定颜色，例如导航和内容之间的空间？
如果我不使用 this 教程中的 clear ，我的布局只会看起来像我想要的那样。为什么？

对于中间颜色，我尝试将其放入 custom.css 中但没有成功：

div#base {
    background-color: #000;
}

如果您不熟悉 960 网格系统，但仍想尝试帮助整个 960.css，可以找到 here。

两个问题都解决了：

我的第二个问题在 Jan Aagaard 的帖子中得到了解决。我没有包含 nbsp XML 实体并且有一个空的 div。它不起作用，至少在 Firefox 3.x 中不起作用。

我当前的代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/custom.css" />
<title>The system</title>
</head>
<body>

<div class="container_16" id="base">
    <div class="grid_16" id="header">Graphical banner</div>
    <div class="clear">&nbsp;</div>
    <div class="grid_16" id="logoutrow">Logout row</div>
    <div class="clear">&nbsp;</div>
    <div class="grid_16" id="navigation-content>
        <div class="grid_3 alpha" id="navigation">Navigation</div>
        <div class="grid_13 omega" id="content">Content</div>
    </div>
    <div class="clear">&nbsp;</div>
    <div class="grid_16" id="footer">Footer</div>
    <div class="clear">&nbsp;</div>
</div>

</body>
</html>

960 grid system 表示网格子节点应遵循某些规则。第一个子节点应该有 alpha 类，最后一个子节点应该有 omega 类。这就是我在上面所做的。这与 GateKiller 在下面给出的答案不同，除此之外提供了一个解决方案。

【问题讨论】：

标签： html css 960.gs

【解决方案1】：

最好的方法是将#navigation 和#contents 包装在容器div 中，如下所示：

<div class="container_16" id="base">
    <div class="grid_16" id="header">Graphical banner</div>
    <div class="grid_16" id="logoutrow">Logout row</div>
    <div class="grid_16" id="navigation-content">
        <div class="grid_3" id="navigation">Navigation</div>
        <div class="grid_13" id="content">Content</div>
    </div>
    <div class="grid_16" id="footer">Footer</div>
</div>

你可以这样设置背景：

#navigation-content {
    background: #000
}

如果您不使用完整的 16 个网格或者如果您使用任何需要清除的浮动规则，您才真正需要清除 div。 The author has the following to say on the clear:

最后，我想谈谈960.css中包含的清除方法。首先是我个人的偏好，添加一些无害的标记来清除所有元素。我已经写了很多关于它的内容，所以我不再赘述。基本上，将 class="clear" 添加到您想要消失的或
中。它的唯一作用就是清除浮动。
另一种方法适用于所有不想弄脏 HTML 的标记纯粹主义者。相反，您可以通过 CSS 插入标记。这种技术也已经有据可查。本质上，将 class="clearfix" 添加到元素以清除它们之后的内容。

【讨论】：

对不起。我在第二个问题中忘记了教程的链接。现在已经更正了。
我已经添加了第二个问题的答案。
我再次更新了这个问题。感谢您提供翔实的回答！即使您没有提及 alpha 和 omega 类，它是否正确？（见我上面添加的部分。如果正确，我会更改它。）

【解决方案2】：

第二个问题的答案：<div class="clear">&nbsp;</div> 将具有以下样式的元素添加到您的页面。它基本上是一个空元素，不允许任何元素在它的左边或右边，有效地强制它之前和之后的内容在不同的行上。并非所有浏览器都需要它。

{
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

您可以使用clearfix 类来代替clear 元素。像这样将它添加到您的 contianer 元素中：

<div class="container_16 clearfix" id="base">

这样可以避免出现空元素，但我认为这种方案对不同浏览器的兼容性较差。

【讨论】：

【解决方案3】：

它们都是浮动的，所以我猜#base 容器没有扩展以包含它们。尝试将 overflow: hidden; 添加到您的 #base div 中，使其包含浮动的子元素 - 从而让您可以看到应用到它的背景颜色。

【讨论】：

【解决方案4】：

这样做。

<div class="container_16" id="base" style="background:#000">

【讨论】：