今天要來講 金魚都能懂的網頁切版 : 導覽列 NO007，
切版網頁，免不了得製作導覽列，
算是非常非常基本的要求，
前期我在練習切版的時候，常常莫名其妙的就卡住做不出來。

本篇關鍵字

• ul、li 、a
• :hover
• display: flex, justify-content, align-items
• transition

範例檔

HTML

<header class="main-header">
  <div class="container">
    <h1><a href="#">Zombie@Dump</a></h1>
    <nav>
      <ul class="main-menu">
        <li><a href="#">關於我們</a></li>
        <li><a href="#">作品們</a></li>
        <li><a href="#">聯絡我們</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS

a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.main-header {
  width: 100%;
  background-color: #E83015;
}

.container {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.main-header h1 {
  line-height: 60px;
  margin: 0 15px;
}

.main-menu {
  display: flex;
}

.main-menu li {
  position: relative;
  transition: .5s;
}

.main-menu li a {
  padding: 0 15px;
  line-height: 60px;
}

.main-menu li::after {
  content: '';
  position: absolute;
  height: 4px;
  left: 50%;
  right: 50%;
  bottom: 0;
  background-color: #fff;
  transition: .5s;
}

.main-menu li:hover {
  background-color: #b02914;
}

.main-menu li:hover::after {
  left: 0;
  right: 0;
}

喪屍分解

• 使用display: flex 達成元素橫向排列以及靠邊排列
• justify-content

  justify-content: flex-start;
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
  

  （詳細內容可以看這裡）
• align-items(雖然沒有用到)

  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  

  （詳細內容可以看這裡）
• 使用 line-height 做到單行垂直置中
• 利用 ::after 搭配left, right 製作出元素被 :hover 時線條由中間向外長的效果（可以自己試試看讓他由外往中間長）
• 使用transition 設定 :hover 效果時間

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是 Navbar - 多層次選單。