導航欄分類 CSS 樣式介紹
隨著網站的發展，導航欄已經成為網站中不可或缺的一部分。導航欄可以幫助我們快速找到我們想要的內容，提高網站的瀏覽效率。CSS 樣式可以幫助我們制作出不同類型的導航欄，提高網站的美觀度和用戶體驗。
下面，我們將介紹如何使用 CSS 樣式來制作導航欄分類。
## 1. 垂直導航欄
垂直導航欄通常使用導航欄按鈕和垂直菜單欄組成。我們可以使用 CSS 樣式來調整導航欄的大小和位置，使它們看起來更加美觀。
### 樣式表
```css
nav {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
padding: 20px;
nav > ul {
list-style-type: none;
margin: 0;
padding: 0;
nav > ul > li {
display: inline-block;
width: 100%;
text-align: center;
margin-bottom: 20px;
nav > ul > li:last-child {
margin-bottom: 0;
nav > ul > li > a {
color: #333;
text-decoration: none;
padding: 10px 20px;
font-size: 16px;
上述樣式表代碼可以制作出一個垂直導航欄。導航欄的父元素為 `nav`，子元素為 `ul`, `li` 元素為導航欄的菜單項，使用 `display: inline-block` 將其設置為可交互的樣式，`margin-bottom` 用于控制導航欄的下拉菜單的高度，`text-align: center` 用于對齊菜單項，`margin-bottom` 和 `padding` 用于控制菜單項的垂直間距和垂直按鈕高度。
## 2. 水平導航欄
水平導航欄通常使用導航欄按鈕和水平菜單欄組成。我們可以使用 CSS 樣式來調整導航欄的大小和位置，使它們看起來更加美觀。
### 樣式表
```css
nav {
display: flex;
flex-direction: row;
align-items: center;
margin: 0 auto;
padding: 20px;
nav > ul {
list-style-type: none;
margin: 0;
padding: 0;
nav > ul > li {
display: inline-block;
width: 100%;
text-align: center;
margin-bottom: 20px;
nav > ul > li:last-child {
margin-bottom: 0;
nav > ul > li > a {
color: #333;
text-decoration: none;
padding: 10px 20px;
font-size: 16px;
上述樣式表代碼可以制作出一個水平導航欄。導航欄的父元素為 `nav`，子元素為 `ul`, `li` 元素為導航欄的菜單項，使用 `display: inline-block` 將其設置為可交互的樣式，`margin-bottom` 用于控制菜單項的下拉菜單的高度，`text-align: center` 用于對齊菜單項，`margin-bottom` 和 `padding` 用于控制菜單項的垂直間距和垂直按鈕高度。
使用 CSS 樣式可以制作出不同類型的導航欄，使網站更加美觀和易于使用。