Question

我正在使用骨架框架，我正在尝试制作一个简单的中堂吧？

当我尝试创建导航栏div并将css导航栏ID颜色设置为蓝色时，背景不会改变。但是，如果我尝试更改各列，颜色将会改变。网格框架是否有一种方法可以在顶部创建一致的导航栏，而不会告诉每个列是某种颜色。这看起来很傻。还有可能有一个延伸超过框架960px长度的导航栏吗？我想将条形背景延伸到屏幕的两侧。

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="skeleton.css">
    <link rel="stylesheet" type="text/css" href="normalize.css">

</head>

<div class="container">

    <div id="nav-bar">

        <div class="two columns">
            <h1>DS</h1>
        </div>
        <div id="nav" class="ten columns">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div><!---nav-bar--->

</div><!---container--->

</html>

CSS：

    .container {
    margin-top: 50px;}

#nav-bar {
    background-color: blue;}

#nav {
    margin: 13px 0 0 0;}


#nav ul li {
    display: inline;
    margin: 0 20px 0 0;
    margin-bottom: 130px;}

#nav a {
    text-decoration: none;
    color: black}

#nav a:hover {
    text-decoration: underline;}

https://jsfiddle.net/gp9d7yvz/

Answer 1

CSS代码的第三行有错误：没有关闭}标记。这会导致以下CSS出现故障。你也忘了把结束“;”在你的“颜色：黑色”结束时属性。如果它不起作用也请添加一个小提琴。

Answer 2

第一个问题： 尝试在＃nav不在＃nav-bar

下添加背景颜色

#nav {
margin: 13px 0 0 0;
background-color: blue;
}

第二个问题： 您的所有内容都在.container中，宽度为960px。当它们在这个容器内时，你不能让这些div的宽度为100％。因此，您需要通过将标题移动到容器外部来更改代码。

<div id="nav-bar"> 
      <div class="two columns">
            <h1>DS</h1>
        </div>
        <div id="nav" class="ten columns">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
</div><!---nav-bar-->


<div class="container">
</div><!---container-->

这是一个例子： https://jsfiddle.net/gp9d7yvz/5/

When using grid 960, can I still have a 100% width header section?

Answer 3

#nav个孩子向左浮动，使#nav没有身高。我们在<div style="clear:both"></div>的结束标记之前添加#nav，以使其具有像这个小提琴一样的高度。

https://jsfiddle.net/gp9d7yvz/2/

为什么我的背景导航栏不会改变颜色？

3 个答案: