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

Question

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

当我尝试创建导航栏 div 并将 css 导航栏 ID 颜色设置为蓝色时，背景不会改变。但是，如果我尝试更改 individual 列，颜色将会改变。有没有一种方法可以让网格框架在顶部创建一个一致的导航栏，而不用告诉每一列是某种颜色。这看起来很傻。还有可能有一个导航栏超过框架 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 出现故障。你也忘了把结束“;”在你的 "color:black;" 属性结束时。如果它不起作用也请添加一个fiddle。

Answer 2

第一个问题： 尝试在 #nav 下添加 background-color 而不是在 #nav-bar

下

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

第二个问题： 您的所有内容都在宽度为 960 像素的 .container 中。当这些 div 位于此容器内时，您无法使它们的宽度达到 100%。所以你需要做的是通过将 header 移到容器外来更改你的代码。

<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 children 向左浮动，使 #nav 没有高度。在 #nav 的结束标记前添加 <div style="clear:both"></div> 使其具有这样的高度 fiddle.

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

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

Why won't my background Nav bar change colour?

html

css

skeleton-css-boilerplate