Question

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

我想将 Navigation 和 Content 之间的颜色设置为＃000（纯黑色），但我无法弄清楚如何。我目前得到的是：

alt text

使用此代码：

<!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的帖子中解决了。我没有包含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在下面给出的答案不同，除了那个提供了解决方案。

Answer 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”添加到＆lt; span＆gt;或者＆lt; div＆gt;你想要消失。它唯一的作用就是清除漂浮物。

另一种方法适用于所有标记纯粹主义者的人，他们不想弄脏您的HTML。相反，您可以通过CSS插入标记。这项技术也已有详细记载。基本上，将class =“clearfix”添加到元素中以清除它们后面的内容。

Answer 2

第二个问题的答案：<div class="clear"> </div>在页面中添加了具有以下样式的元素。它基本上是一个空元素，不允许任何元素向左或向右，有效地强制它之前和之后的内容，在单独的行上。所有浏览器可能都不需要它。

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

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

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

这样你可以避免空元素，但我认为这个解决方案不兼容不同的浏览器。

Answer 3

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

Answer 4

这样做。

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

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

4 个答案: