4

我正在使用960 网格系统来创建布局原型。

我想将导航和内容之间的颜色设置为#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>

我的两个问题：

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

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

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

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

两个问题都解决了：

  • 我的第二个问题在 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 网格系统说网格子节点应该遵循一定的规则。第一个子节点应该有alpha类，最后一个是omega类。这就是我在上面所做的。这与 GateKiller 在下面给出的答案不同，除此之外，它还提供了一个解决方案。

4

4 回答 4

5

最好的方法是将 #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。作者有以下明确要说的：

最后，我想谈谈960.css中包含的清除方法。首先是我个人的偏好，添加一些无害的标记来清除所有元素。我已经写了很多关于它的内容，所以我不再赘述。基本上，将 class="clear" 添加到要消失的 <span> 或 <div> 中。它的唯一作用是清除浮动。

另一种方法适用于所有不想弄脏 HTML 的标记纯粹主义者。相反，您可以通过 CSS 插入标记。这种技术也已经有据可查。本质上，将 class="clearfix" 添加到元素以清除它们之后的内容。

于 2009-04-07T10:05:05.860 回答
1

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

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

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

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

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

于 2009-04-07T10:25:13.863 回答
0

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

于 2009-04-07T10:44:25.827 回答
-4

做这个 。

<div class="container_16" id="base" style="background:#000">
于 2009-04-07T10:09:21.327 回答