CSS導(dǎo)航欄可以讓網(wǎng)站更加美觀和易于導(dǎo)航。以下是如何創(chuàng)建一個簡單的導(dǎo)航欄的步驟。

/*HTML代碼*/
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</nav>
/*CSS代碼*/
nav {
background-color: #333;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}

第一步是創(chuàng)建一個 HTML 導(dǎo)航元素。我們使用<nav>元素創(chuàng)建導(dǎo)航欄。在<nav>中，我們有一個未排序列表 (<ul>)，該列表包含了我們導(dǎo)航的所有鏈接，每個連接用一個列表項 (<li>) 來表示。

在 CSS 中，我們首先為導(dǎo)航欄設(shè)置背景色。接下來，我們樣式化我們的未排序列表。我們?nèi)サ袅四J(rèn)的列表樣式，將margin和padding設(shè)為 0，以取消列表項與父元素之間的空白。狀態(tài)浮動的列表項之后，我們將其鏈接屬性設(shè)置為塊級元素，并設(shè)置其他樣式，例如文字顏色、文本居中、內(nèi)邊距等。

最后，我們添加鼠標(biāo)滑過狀態(tài)。當(dāng)鼠標(biāo)懸停在鏈接上時，我們改變了鏈接的背景顏色。