HTML5和CSS是創建瀏覽器網頁的兩個核心技術。這兩種技術的最常見用途之一就是創建導航欄。本文將介紹HTML5和CSS如何聯合使用來創建一個漂亮且實用的導航欄。 首先，我們需要創建一個HTML5結構。我們將使用無序列表來創建我們的導航欄。每個列表項將成為導航欄的一個鏈接。此外，我們還需要一個包裝器來包含我們的導航欄，以便我們可以對其應用樣式。下面是一個簡單的HTML5代碼。

<div class="nav-wrapper">
<ul class="nav">
<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>
</div>

接下來，我們需要使用CSS來應用樣式。我們將使導航欄水平排列在頁面的頂部。我們還將添加背景顏色和邊框，以使其更具可讀性。我們還會使鏈接在鼠標懸停時變為不同的顏色，這樣用戶就會知道他們可以單擊它們。 首先，我們將定義我們的包裝器樣式。

.nav-wrapper {
background-color: #333; /* 設置背景顏色 */
border: 1px solid #ddd; /* 設置邊框*/
padding: 10px; /* 設置內邊距 */
}

接下來，我們將定義我們的導航欄和鏈接的樣式。

.nav {
list-style: none; /* 移除列表樣式 */
margin: 0;
padding: 0;
}
.nav li {
display: inline-block; /* 水平排列 */
margin-right: 10px; /* 間距 */
}
.nav li a {
color: #fff; /* 設置文本顏色 */
text-decoration: none; /* 移除下劃線 */
}
.nav li a:hover {
color: #ccc; /* 鼠標懸停顏色 */
}

現在，您已經學會了如何使用HTML5和CSS創建一個簡單的導航欄。您還可以根據需要添加額外的樣式和布局來完善它。