关于使用960网格系统的CSS设计的问题
我正在使用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的一篇文章中得到了解决.我没有包含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网格系统说网格子节点应该遵循一定的规则.第一个子节点应该具有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.作者有以下明确说明:
最后,我想谈谈960.css中包含的清算方法.首先是我个人的偏好,添加一个无害的标记来清除所有元素.我已经广泛地写了这篇文章,所以我不会再讨论这一切了.基本上,将class ="clear"添加到要消失的<span>或<div>.它唯一的效果是清除浮子.
另一种方法适用于所有标记纯粹主义者的人,他们不想弄脏您的HTML.相反,您可以通过CSS插入标记.这项技术已经有很好的文献记载.基本上,将class ="clearfix"添加到元素以清除它们之后的内容.
| 归档时间： |
|
| 查看次数： |
11802 次 |
| 最近记录： |