CSS3導航欄是網頁設計中常見的元素，其能夠提升網頁的可讀性與美觀性。今天我們來學習一下CSS3導航欄的制作方法。

/* 首先，我們需要定義導航欄的樣式 */
nav {
background-color: #333; /* 背景顏色 */
color: #fff; /* 文字顏色 */
font-size: 18px; /* 字體大小 */
height: 50px; /* 導航欄高度 */
display: flex; /* 彈性盒子布局 */
justify-content: space-between; /* 兩端對齊 */
align-items: center; /* 垂直居中 */
padding: 0 20px; /* 左右填充 */
}
/* 定義導航欄鏈接的樣式 */
nav a {
color: #fff; /* 文字顏色 */
text-decoration: none; /* 文字下劃線 */
margin-left: 20px; /* 左側間隔 */
}
/* 定義當前鏈接的樣式 */
nav a.current {
color: #ff0; /* 文字顏色 */
}
/* 鼠標懸停時鏈接的樣式 */
nav a:hover {
color: #ff0; /* 文字顏色 */
}

以上是CSS3導航欄的基本樣式。下面我們來制作一個具體的示例：

<nav>
<a href="#" class="current">首頁</a>
<a href="#">新聞</a>
<a href="#">娛樂</a>
<a href="#">科技</a>
<a href="#">體育</a>
</nav>

通過以上代碼，我們可以制作出一個基本的導航欄。在需要修改導航欄樣式時，只需修改CSS即可。

CSS3導航欄的制作方法相對簡單，但是需要仔細考慮每個細節，以確保導航欄在各類設備上都能夠正常顯示。希望本篇文章能夠幫助大家更好地掌握CSS3導航欄的制作方法。