不能讓HTML看起來像我想

Question

我有麻煩定位在哪裏，我想在這裏是我到目前爲止的代碼：

<header> 
    <nav> 
     <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="news.html">News</a></li> 
     <li><a href="canvas.html">Canvas</a></li> 
     <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </nav> 
     <div id="banner"> 
      <div id="overlay"> 
       <h1>ABOUT</H1> 
      </div> 
     </div> 


</header> 

和繼承人的樣式表

/*navigation bar*/ 

nav { 
    text-align: center; 
} 

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

nav ul li { 
    display: inline-block; 
    text-align: center; 
} 

nav a { 
    line-height: 100px; 
    letter-spacing: 2px; 
    font-size: 11px; 
    color: #000000; 
    display: block; 
    width: 100px; 
    position: relative; 
    text-decoration:none 
} 
a:hover { 
     border-bottom: 3px solid black; 
    margin-bottom: -3px; 
    color:#000000; 
} 

/*header*/ 

#banner { 
    width: 1900px; 
    height: 500px; 
    margin-top: -100px; 
    background-color: #C0C0C0; 
    background-image: url('aboutheader.jpg'); 
} 
#about{ 
    position: relative; 
    top : 250px; 
    background-color: rgba(255,255,255,0.4); 
    font-size: 60px; 

} 

這裏是我希望它看起來像http://prntscr.com/5cvrxu

這裏什麼是它目前看起來像http://prntscr.com/5cvs86

Answer 1

你有一個div id =「overlay」，根本沒有風格。 你有一個#about CSS，它根本沒有被使用。

這就是你的問題的根源 - 我會將id =「overlay」的div更改爲id =「about」以開始。