Edit in JSFiddle


              
<body>
<div class="banner">
  <h1>這是範例網頁</h1>
  <div class="navbar">
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#gallery">Gallery</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="content-section" id="about">
  <h1>About</h1>
  <p>content........</p>
</div>
<div class="content-section" id="work">
  <h1>Work</h1>
  <p>content........</p>
</div>
<div class="content-section" id="gallery">
  <h1>Gallery</h1>
  <p>content........</p>
</div>
<div class="content-section" id="contact">
  <h1>Contact</h1>
  <p>content........</p>
</div>
</body>
.banner{
  background-color: yellow;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
a:link {
  text-decoration: none;
  color: #444444;
}
a:hover{
  background-color: grey;
}

.content-section{
  text-align: center;
  margin-top: 5px;
  height: 200px;
  border: 2px dotted black;
}