1. 創(chuàng)建導(dǎo)航欄容器
在HTML中，我們可以使用div元素創(chuàng)建一個(gè)導(dǎo)航欄容器。代碼如下：
avbar">
2. 設(shè)置導(dǎo)航欄樣式
為了讓導(dǎo)航欄顯示出橫向效果，我們需要設(shè)置一些CSS樣式。具體來說，我們需要設(shè)置導(dǎo)航欄容器的display屬性為flex，同時(shí)設(shè)置它的子元素（即導(dǎo)航項(xiàng)）的樣式。代碼如下：
avbar {
display: flex;tentter; /* 將導(dǎo)航項(xiàng)居中 */d-color: #333; /* 設(shè)置背景色 */
height: 50px; /* 設(shè)置導(dǎo)航欄高度 */
avbar a {
color: white; /* 設(shè)置字體顏色 */ter; /* 設(shè)置文本居中 */one; /* 去掉下劃線 */g: 14px 16px; /* 設(shè)置內(nèi)邊距 */
avbar a:hover {d-color: #ddd; /* 設(shè)置鼠標(biāo)懸停時(shí)的背景色 */
color: black; /* 設(shè)置鼠標(biāo)懸停時(shí)的字體顏色 */
3. 添加導(dǎo)航項(xiàng)
在導(dǎo)航欄容器中添加導(dǎo)航項(xiàng)。代碼如下：
avbar">
完整代碼示例：
avbar">