爲什麼我的背景導航欄不能改變顏色？

我正在使用骨架框架，並試圖做一個簡單的中殿吧？爲什麼我的背景導航欄不能改變顏色？

當我嘗試創建導航欄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/

來源

2015-08-08 Tyberius

請問您可以添加小提琴嗎？ – Mehmood

那麼，關於寬度...更改skeleton.css，從容器中刪除最大寬度，但你將不得不爲你的自定義CSS設置最大寬度 - 如果你想固定寬度（在內容部分！）... 。因此，你需要自定義佈局/網格 - 製作你自己的CSS，而不是使用框架.... – sinisake

的#nav孩子是浮動的左邊，使#nav沒有高度。在#nav的結束標記前加上<div style="clear:both"></div>，使它具有像這個小提琴一樣的高度。

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

來源

2015-08-08 16:35:36 chaintng

目前，正在對你的CSS代碼的第三行錯誤：沒有結束}標籤。這會導致以下CSS發生故障。你也忘了把結束「;」在你的「顏色：黑色」結尾處屬性。如果它不起作用，請添加小提琴。

來源

2015-08-08 15:42:58 Malcom

第一個問題： 嘗試增加下#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?

來源

2015-08-08 16:13:35 LoSpazzino

嘗試不發佈鏈接到內容，但不包括相關的部分，因爲鏈接的頁面可能會在以後刪除 –

你是絕對的對。謝謝 – LoSpazzino

爲什麼我的背景導航欄不能改變顏色？

回答

相關問題