# 導覽列

### **1.**

<header>
    <h1>Text Logo</h1>
    <nav>
      <ul class="nav_link">
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
      </ul>
    </nav>
    <a href="#">
      <button class="button1">Contact</button>
    </a>
  </header>

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
 
  body {
    margin: 0;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  li,a,button {
    font-family: "Montserrat",sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: white;
    text-decoration: none;
  }
  header {
    display: flex;
    background-color: black;
    justify-content: space-between;
    align-items: center;
    padding: 0px 35px;
  }
  h1 {
    color: white;
    cursor: pointer;
  }
  .nav_link {
    list-style: none ;
  }
  .nav_link li {
    display: inline-block;
    padding: 0px 20px;
  }
  .nav_link li a {
    transition: all .5s ease 0s;
  }
  .nav_link li a:hover {
    color: seagreen;
  }
  button {
    padding: 10px;
    background-color:seagreen;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all .5s ease 0s;
  }
  button:hover {
    background-color:yellowgreen;
  }

### **2.**

  <header>
    <h1>Text Logo</h1>
    <nav>
      <ul class="nav_link">
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
      </ul>
    </nav>
    <a href="#">
      <button>Contact</button>
    </a>
  </header>

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
 
  body {
    margin: 0;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  li,a,button {
    font-family: "Montserrat",sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: white;
    text-decoration: none;
  }
  header {
    display: flex;
    margin-top: 10px;
    background-color: black;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 35px;
  }
  h1 {
    color: white;
    cursor: pointer;
    margin-right: auto;
  }
  .nav_link {
    list-style: none ;
  }
  .nav_link li {
    display: inline-block;
    padding: 0px 20px;
  }
  .nav_link li a {
    transition: all .5s ease 0s;
  }
  .nav_link li a:hover {
    color: seagreen;
  }
  button {
    margin-left: 20px;
    padding: 10px;
    background-color:seagreen;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all .5s ease 0s;
  }
  button:hover {
    background-color:yellowgreen;
  }