关于CSS设计使用960网格系统的问题 [英] Questions regarding CSS design using 960 grid system
问题描述
我使用教程。为什么？
对于颜色之间的颜色，我试过把它放在custom.css中不成功：
div＃base {
background-color：＃000;
}
如果您不熟悉960网格系统，但仍然想尝试和帮助整个960.css可在此处找到。
这两个问题已解决：
- 下面在Jan Aagaard的一篇文章中。我没有包括该XML实体，并有一个空的div。它不工作，至少不在Firefox 3.x中。
我当前的代码看起来像这样：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org /TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-typecontent =text / html; charset = UTF-8/>
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/>
< link rel =stylesheettype =text / cssmedia =allhref =css / text.css/>
< link rel =stylesheettype =text / cssmedia =allhref =css / 960.css/>
< link rel =stylesheettype =text / cssmedia =allhref =css / custom.css/>
< title>系统< / title>
< / head>
< body>
< div class =container_16id =base>
< div class =grid_16id =header>图形横幅< / div>
< div class =clear>& nbsp;< / div>
< div class =grid_16id =logoutrow>退出行< / div>
< div class =clear>& nbsp;< / div>
< div class =grid_16id =navigation-content>
< div class =grid_3 alphaid =navigation> Navigation< / div>
< div class =grid_13 omegaid =content>内容< / div>
< / div>
< div class =clear>& nbsp;< / div ;
< div class =grid_16id =footer> Footer< / div>
< div class =clear>& nbsp;< / div>
< / div>
< / body>
< / html>
$ b b
960网格系统表示网格子节点应遵循特定规则。第一个子节点应该有 alpha 类，最后一个是 omega 类。这是我在上面做的，这与下面GateKiller的区别，除了提供了解决方案。
最好的方法是wrap #navigation和＃在容器div内的内容如下：
< div class =container_16id =base>
< div class =grid_16id =header>图形横幅< / div>
< div class =grid_16id =logoutrow>退出行< / div>
< div class =grid_16id =navigation-content>
< div class =grid_3id =navigation>导航< / div>
< div class =grid_13id =content>内容< / div>
< / div>
< div class =grid_16id =footer> Footer< / div>
< / div>
您可以将背景设置为：
＃navigation-content {
background：＃000
}
你真的需要清除div，如果你不使用全16网格，或者如果你使用任何浮动规则需要清除。 作者对以下内容说了清楚：
最后，我想谈谈960.css中包含的清算方法。首先是我的个人喜好，添加一个无害的位标记来清除所有元素。我已经写了很多，所以我不会再讨论这一切。基本上，将class =clear添加到< span>或< div>你想消失。唯一的效果是清除浮动。
另一种方法是为所有的标记纯粹派，谁不想弄脏你的HTML。相反，您可以通过CSS插入标记。这种技术也已经被很好地记录。基本上，对元素添加class =clearfix以清除后面的内容。
I'm using 960 grid system to create a layout prototype.
I would like to set the color between Navigation and Content to #000 (solid black), but I can't figure out how. What I currently get is:
Using this code:
<!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>
My two questions:
- How do I specify a color for all "in between" space like the one between Navigation and Content?
- My layout only looks like I want if if I don't use clear like in this tutorial. Why?
For the in between color I've tried putting this in custom.css without success:
div#base {
background-color: #000;
}
If you are unfamiliar with 960 grid system but still would like to try and help the whole 960.css can be found here.
Both questions solved:
- My second question is solved below in a post by Jan Aagaard. I didn't include the nbsp XML entity and had an empty div. It didn't work, at least not in Firefox 3.x.
My current code looks like this:
<!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 grid system says grid child nodes should follow certain rules. The first child node should have the alpha class and the last one the omega class. Which is what I'm doing above. It's the difference from the answer GateKiller gave below, which apart from that provided a solution.
The best way to do this would be to wrap #navigation and #contents inside a container div like so:
<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>
You could then set the background as so:
#navigation-content {
background: #000
}
You only really need the clearing div if the you do not use the full 16 grids or if you using any float rules which need clearning. 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.
这篇关于关于CSS设计使用960网格系统的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
