我在用着960网格系统 http://960.gs/创建布局原型。
我想设置之间的颜色导航 and 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>
我的两个问题：
- 如何为所有“中间”空间（例如导航和内容之间的空间）指定颜色？
- 如果我不使用clear，我的布局只会看起来像我想要的this http://nettuts.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/教程。为什么？
对于中间颜色，我尝试将其放入 custom.css 中但没有成功：
div#base {
background-color: #000;
}
如果你不熟悉960网格系统但仍然想尝试并帮助整个960.css可以找到here http://pastebin.com/f6e31aef1.
两个问题都解决了：
- 我的第二个问题在 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"> </div>
<div class="grid_16" id="logoutrow">Logout row</div>
<div class="clear"> </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"> </div>
<div class="grid_16" id="footer">Footer</div>
<div class="clear"> </div>
</div>
</body>
</html>
The 960网格系统 http://960.gs/表示网格子节点应该遵循一定的规则。第一个子节点应该具有alpha类和最后一类omega班级。这就是我上面所做的。这与下面 GateKiller 给出的答案不同，除此之外提供了解决方案。
最好的方法是将 #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。作者有以下几点要明确表示 http://sonspring.com/journal/960-grid-system:
最后我想谈谈960.css中包含的清除方法。首先是我个人的偏好，添加一些无害的标记来清除所有元素。我已经写过很多关于它的文章，所以我不会再赘述。基本上，将 class="clear" 添加到您想要消失的 或 中。它的唯一作用是清除浮动。
另一种方法适合所有不想弄脏 HTML 的标记纯粹主义者。相反，您可以通过 CSS 插入标记。该技术也已得到充分记录。本质上，向元素添加 class="clearfix" 以清除它们后面的内容。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
