通常，我們要先用Html把結構建造出來，會有一張圖片logo，以及很多的超連結被包覆在導覽列裡。
<body>
<div class="header">
<a class="logo" href="#">
<img src="1200x630wa.png" alt="">
</a>
<nav>
<a href="">關於我們</a>
<a href="">活動辦法</a>
<a href="">下載</a>
<a href="">產品介紹</a>
<a href="">客服中心</a>
</nav>
</div>
</body>
有了這些元素後，我們就可以開始排版囉，設定CSS!
.header img{
width: 80px;
height: 100%;
}
一開始的圖片太大了，我們先設定他的寬度像素，高度就設定100%或是你要的高度。
我們想讓文字與圖片在同一行，就使用display:flex來排版(記得要在外容器設定)，並設定背景顏色。
.header{
display: flex;
background-color: rgb(184, 176, 176);
}
把超連結的底線去掉。
.header a{
text-decoration: none;
}
我們想讓導覽列的文字置中，並且在最後面。
.header nav{
display: flex;
width: 100%;
justify-content: flex-end;
line-height: 25px;
font-size: 0px;
}
一樣在外容器nav設定排版flex，flex-end是水平排列放在最後的屬性，垂直置中line-height: 25px(設定高度的一半);
這樣子就置中並排版在最後了!但文字間是不是有點擠呢，讓我們來設定padding，順便將文字設定成藍色。
.header nav a{
display: inline-block;
padding: 10px;
color: blue;
font-size: 16px;
}
這樣簡單的一個導覽列就完成了!我們還可以做點變化。滑鼠觸碰到時變色!
我們可以添加當觸碰到超連結時，背景圖片變成黑色!
.header nav a:hover{
background-color: black;
}
趕快設定看看吧，增加網頁的趣味性!
iThome鐵人賽
看影片追技術