<body>
  <nav class="nav">
    <h1><a href="#" class="logo"><img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="100"></a></h1>

    <ul class="nav-list">
      <li class="nav-item"><a class="nav-link" href="#">首頁</a></li>
      <li class="nav-item"><a class="nav-link" href="#profile">個人</a></li>
      <li class="nav-item"><a class="nav-link" href="#edu">學歷</a></li>
      <li class="nav-item"><a class="nav-link" href="#skills">技能</a></li>
    </ul>
  </nav>
  <div class="container">
    <section id="header" class="mb-3">
      <img class="banner"
           src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/student-week1/banner.png" alt="">
    </section>
    <section id="profile" class="mb-3">
      個人資料區塊
    </section>
    <section id="edu" class="mb-3">
      學歷區塊
    </section>
    <section id="skills" class="mb-3">
      技能區塊
    </section>
  </div>
</body>
.nav{
  background-color: #e8eeea;
  padding: 0 10px;
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-list{
  display: flex;
}
.nav-link{
  text-decoration: none;
  color: #00cc99;
  padding: 5px 10px;
}
.container{
  width:900px;
  margin: 0 auto;
}
.mb-3{
  margin-bottom: 300px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.