CSS沒辦法像之前打html時，一邊打一邊介紹功能，因為每個標籤會重複運用到各種功能。於是在解說了這麼多的CSS 與之後，讓我們來把它應用在網頁吧！

body{
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 16px;
    color: #3A3A3A;
}

把網頁想要統一的設定打在body，例如字型、字級與顏色。

Navigation bar

<nav>
	<a href="#ABOUT">About Me</a>
	<div class="vr"></div>
	<a href="#UI">UI Design</a>
	<a href="#GRAPH">Graphic</a>
	<a href="#ILLUS">Illustration</a>
</nav>

首先，幫你想跳轉到的區域取個id，在a 標籤的連結處加入id，這樣點文字就會跳到那個區塊囉！
嗯？你說<div class="vr"></div> 這行是什麼？等等會解釋他的功能喔。
a 標籤預設長相為藍色字 + 底線，跟我們的設計很不一樣，所以要改掉。

nav a{
    text-decoration: none;
    margin-right: 16px; 
		color: #3A3A3A;
}

這邊使用text-decoration: none; ，text-decoration可以添加文字的底線、刪除線、上底線等等的，使用 none 移除這些裝飾線。另外加上margin-right: 16px; 讓大家有個喘息的空間。

nav a{
    text-decoration: none;
    margin-right: 16px; 
		color: #3A3A3A;
}

跟幾天前的mock-up是不是長得很像了！（除了我有為了語句與順序，改動一些文字內容之外）

但還差了中間那條分隔線，沒錯就是 <div class="vr"></div> ！我通常會設定兩個div作為垂直分隔線 class="vr" 與水平分隔線 class="hr" ，因為使用div的border就能輕易調整這些線條囉。

.vr{
    height: 16px;
    border-left: #3A3A3A solid 2px;
    margin-right: 16px;
}

再來加上hover

nav a:hover{
    color:#D15352;
}

讓他在滑鼠滑過時能變換顏色。

接著使用flex 讓他移到右上角，並且加上position的屬性讓他在滾動頁面時保持在上方，z-index設為5是為了讓他能蓋過其他的物件們。

nav{
    height: 30px;
    padding:20px 50px;
		background-color: #ffffff;

    position: sticky;
    top: 0px;
    z-index: 5;
    
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

到這邊navigation bar就完成囉！

下一章 Keep Going 4 - Content 與About me 區塊

※本文章所使用之圖片皆為本人作品，內容則為本人之經驗分享