都介紹得差不多了，我們就直接來設計一個自己的網站吧～！
(๑•̀ㅂ•́)و✧

首先，我們看到一個網站的首頁，通常最基本會有的就是選單欄，點選可以通往網站的其他部分，那我們就先來設計選單欄吧～

• 用<header>標頭標籤包住<nav>容器，裡面再放一個列表清單當作選單欄
• herf設定連結位置，如果是當前頁面就用#

<header>
    <nav>
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="">P2</a></li>
            <li><a href="">P3</a></li>
            <li><a href="">P4</a></li>
        </ul>
    </nav>
</header>

• 這時候我們就用CSS來改變樣式吧～
• 首先先把全部的邊距設為0，後面再針對各個元素需求進行不同設定。「*」為對所有元素進行設定

* {
    padding: 0;
    margin: 0;
}

• 對ul設定邊距，讓選單欄不要緊貼的邊界

header nav ul {
    padding: 1rem;
}

• 設定一個底色，讓選單欄與正文內容清楚分開

header nav ul {
    padding: 1rem;
    background-color: aqua;
}

• 將列表清單的符號設為無(隱藏)，我們通常看到的選單都只會有文字居多，

header nav ul {
    padding: 1rem;
    background-color: aqua;
    list-style-type: none;
}

• 將列表清單排列顯示為不換行的流水排列，我們通常看到的上方選單欄都是橫向排列的

header nav ul {
    padding: 1rem;
    background-color: aqua;
    list-style-type: none;
    display: flex;
}

• 將每個項目中間設定平分的空格間距，才不會每個選單欄位都擠在一起

header nav ul {
    padding: 1rem;
    background-color: aqua;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}

• 對連結的預設底線顯示為無，我們通常看到的選單欄不會有底線

header nav ul li a {
    text-decoration: none;
}

• 設定字體大小與顏色

header nav ul li a {
    text-decoration: none;
    font-size: 1.5rem;
    color: blue;
}

一個簡單的網頁選單欄就完成啦～