HTML – 使用960网格系统的CSS设计问题

2019年7月28日 135次阅读

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

我想将导航和内容之间的颜色设置为#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教程那样使用清晰,我的布局看起来就像我想要的那样.为什么？

对于颜色之间我尝试将它放在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在下面给出的答案不同,除此之外提供了解决方案.

最佳答案 执行此操作的最佳方法是将#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：

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.

点赞