CSS3導航欄教學

.navbar {
display: flex;
justify-content: center;
align-items: center;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.navbar li {
margin: 0 10px;
}
.navbar a {
text-decoration: none;
color: black;
padding: 5px 10px;
border: 1px solid black;
border-radius: 5px;
}
.navbar a:hover {
background-color: black;
color: white;
}

以上是一個簡單的CSS3導航欄的代碼示例。

首先，我們創建一個類名為navbar的div來包含導航欄的內容。

為了讓導航欄居中，我們使用display:flex;來實現水平和垂直居中。justify-content:center;用于水平居中，align-items:center;用于垂直居中。

在.navbar中，我們創建一個ul列表并設置list-style-type:none;來去除默認的列表樣式，margin:0;和padding:0;來消除默認的margin和padding。

在ul中，我們創建li標簽來包含每一個導航項。我們設置margin:0 10px;來給列表項之間留出間距。

最后，我們創建a標簽作為導航項的鏈接，使用text-decoration:none;來去除下劃線，color:black;設置字體顏色為黑色，padding:5px 10px;來設置導航項的內邊距，border:1px solid black;設置邊框為黑色實線，border-radius:5px;來設置邊框的圓角。

當鼠標懸停在導航項上時，我們使用:hover偽類來設置導航項的背景顏色為黑色，字體顏色為白色。

這是一個簡單的CSS3導航欄的示例，只需幾行代碼就可以快速實現。您可以通過修改樣式來定制適合自己網站的導航欄。