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

问题描述：

我正在使用骨架框架，并试图做一个简单的中殿吧？为什么我的背景导航栏不能改变颜色？

当我尝试创建导航栏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/

请问您可以添加小提琴吗？ – Mehmood

那么，关于宽度...更改skeleton.css，从容器中删除最大宽度，但你将不得不为你的自定义CSS设置最大宽度 - 如果你想固定宽度（在内容部分！）... 。因此，你需要自定义布局/网格 - 制作你自己的CSS，而不是使用框架.... – sinisake

答

的#nav孩子是浮动的左边，使#nav没有高度。在#nav的结束标记前加上<div style="clear:both"></div>，使它具有像这个小提琴一样的高度。

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

答

目前，正在对你的CSS代码的第三行错误：没有结束}标签。这会导致以下CSS发生故障。你也忘了把结束“;”在你的“颜色：黑色”结尾处属性。如果它不起作用，请添加小提琴。

答

第一个问题： 尝试增加下#nav背景颜色不低于＃导航栏

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

第二个问题： 所有的内容是.container内与960像素的宽度。当它们位于此容器中时，您无法获得这些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?

尝试不发布链接到内容，但不包括相关的部分，因为链接的页面可能会在以后删除 –

你是绝对的对。谢谢 – LoSpazzino

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

相关推荐