HTML導航欄盒子是一個非常有用的工具，它可以幫助我們在網站上創建具有導航功能的盒子。它通常位于頁面的頂部，方便用戶快速瀏覽網站的不同部分。本文將介紹如何使用HTML代碼創建一個簡單的導航欄盒子。
我們首先需要創建一個HTML文件，將以下代碼復制到文件中：
<!DOCTYPE html>
<html>
<head>
<title>My Navigation Box</title>
<style>
#nav_box {
background-color: #333;
height: 50px;
padding: 10px;
}
#nav_box li {
display: inline;
margin-right: 10px;
}
#nav_box a {
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 18px;
padding: 5px 10px;
}
#nav_box a:hover {
background-color: #fff;
color: #333;
}
</style>
</head>
<body>
<div id="nav_box">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>以上代碼創建了一個包含導航欄的web頁面。具體來說，這段代碼使用了一個div標簽創建了一個名為“nav_box”的分區。它還使用了一個無序列表（ul）來包含導航項（每個項使用li標簽）。每個導航項都是一個錨點（a標簽），需要在href屬性中指定目標網址。
CSS代碼中定義了“nav_box”類的樣式，使得導航欄盒子具有黑色背景、高度為50px、內外邊距都為10px的外觀。每個導航項都被設置為“display: inline;”，使它們水平排列。鏈接文本被定義為白色、粗體和大小為18像素。當用戶將鼠標懸停在導航項上時，顏色和背景顏色會反轉。
總體來說，這個導航欄盒子代碼非常簡單，但可以幫助我們輕松地在HTML網站上創建一個整潔的導航欄。