CSS3導(dǎo)航欄教學(xué)

.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;
}

以上是一個(gè)簡(jiǎn)單的CSS3導(dǎo)航欄的代碼示例。

首先，我們創(chuàng)建一個(gè)類名為navbar的div來(lái)包含導(dǎo)航欄的內(nèi)容。

為了讓導(dǎo)航欄居中，我們使用display:flex;來(lái)實(shí)現(xiàn)水平和垂直居中。justify-content:center;用于水平居中，align-items:center;用于垂直居中。

在.navbar中，我們創(chuàng)建一個(gè)ul列表并設(shè)置list-style-type:none;來(lái)去除默認(rèn)的列表樣式，margin:0;和padding:0;來(lái)消除默認(rèn)的margin和padding。

在ul中，我們創(chuàng)建li標(biāo)簽來(lái)包含每一個(gè)導(dǎo)航項(xiàng)。我們?cè)O(shè)置margin:0 10px;來(lái)給列表項(xiàng)之間留出間距。

最后，我們創(chuàng)建a標(biāo)簽作為導(dǎo)航項(xiàng)的鏈接，使用text-decoration:none;來(lái)去除下劃線，color:black;設(shè)置字體顏色為黑色，padding:5px 10px;來(lái)設(shè)置導(dǎo)航項(xiàng)的內(nèi)邊距，border:1px solid black;設(shè)置邊框?yàn)楹谏珜?shí)線，border-radius:5px;來(lái)設(shè)置邊框的圓角。

當(dāng)鼠標(biāo)懸停在導(dǎo)航項(xiàng)上時(shí)，我們使用:hover偽類來(lái)設(shè)置導(dǎo)航項(xiàng)的背景顏色為黑色，字體顏色為白色。

這是一個(gè)簡(jiǎn)單的CSS3導(dǎo)航欄的示例，只需幾行代碼就可以快速實(shí)現(xiàn)。您可以通過(guò)修改樣式來(lái)定制適合自己網(wǎng)站的導(dǎo)航欄。