HTML CSS 導航代碼 HTML 和 CSS 都是構建網頁的必要元素，其中導航欄是網頁中非常重要的元素之一。本文將介紹如何使用 HTML 和 CSS 創建簡單的導航欄。 首先，在 HTML 中創建導航欄需要使用 ul 和 li 標簽。ul 表示無序列表，li 表示列表項。下面是一個簡單的 HTML 代碼示例：

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Contact</a></li>
</ul>

上面的代碼創建了一個包含四個列表項的無序列表。每個列表項使用了 a 標簽來添加超鏈接，指向導航目標。 接下來，我們可以使用 CSS 來美化導航欄。為了讓導航欄水平排列，我們需要使用 display: inline-block; 讓 li 元素變成行內元素。同時，我們可以添加背景色、字體顏色、字體大小等樣式進行美化。 下面是一個簡單的 CSS 代碼示例：

上面的代碼為導航欄添加了背景色、字體顏色、字體大小等樣式，同時為超鏈接添加了鼠標懸停效果。 綜合上述 HTML 和 CSS 代碼，我們就可以創建一個簡單的導航欄了。下面是完整的代碼示例：

<nav>
	<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
	</ul>
</nav>
<style>
	nav ul {
padding: 0;
margin: 0;
background-color: #333;
	}
nav li {
display: inline-block;
margin-right: 20px;
	}
nav a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px;
	}
nav a:hover {
background-color: #555;
	}
</style>

在實際的網頁應用中，我們可以根據不同的需求對導航欄進行更多的樣式調整和交互效果添加，打造出更加美觀和易用的導航欄。