不能让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”以开始。