我正在使用 960 grid system创建布局原型(prototype)。
我想将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"> </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>
960 grid system说网格子节点应该遵循一定的规则。第一个子节点应该有 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 个网格，或者如果您使用任何需要清除的 float 规则，您才真正需要清除 div。 The author has the following to say on the clear :
Lastly, I wanted to talk about the clearing methods included in the 960.css. First off is my personal preference, adding an innocuous bit of markup to clear all elements. I have already written about it extensively, so I won’t go over all that again. Basically, add class="clear" to a <span> or <div> that you want to disappear. The only effect it will have is to clear floats.
The other method is for all you markup purists out there, who don’t want to dirty your HTML. Instead, you can insert markup via your CSS. This technique is well documented already as well. Essentially, add class="clearfix" to elements to clear what comes after them.
关于html - 关于使用960网格系统进行CSS设计的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/724878/