如何設置我的導航區域顏色與CSS？

我想將我的導航欄區域更改爲淡藍色，並且設置了我認爲會執行該操作的CSS，但是它只將顏色置於導航項後面，而不是整個導航欄區域。我如何獲得整個導航欄區域的顏色？如何設置我的導航區域顏色與CSS？

HTML

<!doctype html> 
<html> 
<head> 
<title>Cities Gallery</title> 
<link rel="stylesheet" type="text/css" href="css/myStyles.css"> 
</head> 

<body> 
<div class="container"> 

<header> 
    <h1>City Gallery</h1> 
</header> 

<nav> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="london.html">London</a></li> 
     <li><a href="paris.html">Paris</a></li> 
     <li><a href="tokio.html">Tokyo</a></li> 
    </ul> 
</nav> 


<article> 
    <div class="intro_text"> 
     <h1>City Navigator</h1> 
     <p>Welcome to my cities website. Click on a link on a left to view City information</p> 
     </div> 

<img src="images/cities.jpg" alt="Cities" style="width:352px;height:211px;"> 


</article> 
</div> 
</body> 



<footer> 
    <p>Posted by: German Jimenez</p> 
    <p>Contact information: <a href="mailto:[email protected]"> 
    German Jimenez</a>.</p> 
</footer> 
</html>

CSS

div.container{ 
    width:100%; 
    border:1px solid gray; 
    } 


header, footer{ 
    padding:1em;  
    color:white; 
    background-color:black; 
    clear:left; 
    text-align:center 
    } 


nav { 
    float:left; 
    max-width:160px; 
    margin:0; 
    padding:1em; 
    background-color:lightblue; //this did not work 
} 


nav ul { 
    list-style-type: none; 
    padding:0; 
    } 


nav ul a { 
    text-decoration: none; 
    } 


article{ 
    margin-left:170px; 
    border-left:1px solid gray; 
    padding:1em; 
    overflow:hidden; 
}

來源

2017-04-21 John M.

你的HTML是無效的。「' – j08691

之後，您不能擁有內容。我立即修復它。謝謝。 –

我將在.container使用flex，將其設置爲wrap，設置header到flex: 0 0 100%所以它是flex-basis: 100%並將佔據一整行。然後設置article到flex: 1 0 0;（所以它會flex-grow以填補nav剩下的空間）

div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
header, 
 
footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center 
 
} 
 

 
nav { 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
    background-color: lightblue; //this did not work 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
    flex: 1 0 0; 
 
} 
 

 
header { 
 
    flex: 0 0 100%; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>Cities Gallery</title> 
 
    <link rel="stylesheet" type="text/css" href="css/myStyles.css"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 

 
    <header> 
 
     <h1>City Gallery</h1> 
 
    </header> 
 

 
    <nav> 
 
     <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="london.html">London</a></li> 
 
     <li><a href="paris.html">Paris</a></li> 
 
     <li><a href="tokio.html">Tokyo</a></li> 
 
     </ul> 
 
    </nav> 
 

 

 
    <article> 
 
     <div class="intro_text"> 
 
     <h1>City Navigator</h1> 
 
     <p>Welcome to my cities website. Click on a link on a left to view City information</p> 
 
     </div> 
 

 
     <img src="images/cities.jpg" alt="Cities" style="width:352px;height:211px;"> 
 

 

 
    </article> 
 
    </div> 
 
</body>

來源

2017-04-21 20:29:47

如何設置我的導航區域顏色與CSS？

回答

相關問題