<div>導航欄在網頁設計中非常常見，用于顯示網站的導航鏈接，幫助用戶快速跳轉到不同的頁面。使用 CSS 的<div>標簽可以很方便地創建和樣式化導航欄。本文將通過幾個代碼案例來詳細解釋如何使用 CSS 的<div>標簽創建導航欄。</div>

<div>標簽是一個塊級元素，它可以用來創建一個包含其他 HTML 元素的容器。</div> 來看一個簡單的例子：

<code><div>
<p><a href="#home">首頁</a></p>
<p><a href="#about">關于我們</a></p>
<p><a href="#services">服務</a></p>
<p><a href="#contact">聯系我們</a></p>
</div></code>

上面的代碼創建了一個包含四個鏈接的容器。我們可以對這個容器應用 CSS 樣式來美化導航欄。

，我們可以設置容器的背景顏色和字體樣式：

<code><div style="background-color: #333; padding: 10px;">
<p><a href="#home" style="color: #fff; text-decoration: none;">首頁</a></p>
<p><a href="#about" style="color: #fff; text-decoration: none;">關于我們</a></p>
<p><a href="#services" style="color: #fff; text-decoration: none;">服務</a></p>
<p><a href="#contact" style="color: #fff; text-decoration: none;">聯系我們</a></p>
</div></code>

上面的代碼將容器的背景顏色設置為深灰色，并設置內邊距為 10 像素。鏈接的顏色設置為白色，并且去掉了下劃線。

然后，我們可以通過使用 CSS 的"display"屬性來讓鏈接水平排列：

<code><div style="background-color: #333; padding: 10px; display: flex; justify-content: space-between;">
<p><a href="#home" style="color: #fff; text-decoration: none;">首頁</a></p>
<p><a href="#about" style="color: #fff; text-decoration: none;">關于我們</a></p>
<p><a href="#services" style="color: #fff; text-decoration: none;">服務</a></p>
<p><a href="#contact" style="color: #fff; text-decoration: none;">聯系我們</a></p>
</div></code>

上面的代碼將容器的"display"屬性設置為"flex"，這樣四個鏈接將水平排列在一行上，并使用"justify-content"屬性來均勻分布鏈接的位置。

最后，我們可以用 CSS 的:hover 偽類來添加鼠標懸停效果：

<code><div style="background-color: #333; padding: 10px; display: flex; justify-content: space-between;">
<p><a href="#home" style="color: #fff; text-decoration: none;">首頁</a></p>
<p><a href="#about" style="color: #fff; text-decoration: none;">關于我們</a></p>
<p><a href="#services" style="color: #fff; text-decoration: none;">服務</a></p>
<p><a href="#contact" style="color: #fff; text-decoration: none;">聯系我們</a></p>
</div></code>

上面的代碼添加了:hover 偽類，并在鼠標懸停時將鏈接的背景顏色改變為亮灰色：

<code><div style="background-color: #333; padding: 10px; display: flex; justify-content: space-between;">
<p><a href="#home" style="color: #fff; text-decoration: none;">首頁</a></p>
<p><a href="#about" style="color: #fff; text-decoration: none;">關于我們</a></p>
<p><a href="#services" style="color: #fff; text-decoration: none;">服務</a></p>
<p><a href="#contact" style="color: #fff; text-decoration: none;">聯系我們</a></p>
</div></code>

使用 CSS 的<div>標簽可以輕松創建和樣式化導航欄。以上是幾個簡單的代碼案例，展示了如何通過設置背景顏色、字體樣式、鏈接排列方式和鼠標懸停效果來樣式化導航欄。