HTML導(dǎo)航欄盒子是一個(gè)非常有用的工具，它可以幫助我們在網(wǎng)站上創(chuàng)建具有導(dǎo)航功能的盒子。它通常位于頁面的頂部，方便用戶快速瀏覽網(wǎng)站的不同部分。本文將介紹如何使用HTML代碼創(chuàng)建一個(gè)簡單的導(dǎo)航欄盒子。
我們首先需要?jiǎng)?chuàng)建一個(gè)HTML文件，將以下代碼復(fù)制到文件中：
<!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>以上代碼創(chuàng)建了一個(gè)包含導(dǎo)航欄的web頁面。具體來說，這段代碼使用了一個(gè)div標(biāo)簽創(chuàng)建了一個(gè)名為“nav_box”的分區(qū)。它還使用了一個(gè)無序列表（ul）來包含導(dǎo)航項(xiàng)（每個(gè)項(xiàng)使用li標(biāo)簽）。每個(gè)導(dǎo)航項(xiàng)都是一個(gè)錨點(diǎn)（a標(biāo)簽），需要在href屬性中指定目標(biāo)網(wǎng)址。
CSS代碼中定義了“nav_box”類的樣式，使得導(dǎo)航欄盒子具有黑色背景、高度為50px、內(nèi)外邊距都為10px的外觀。每個(gè)導(dǎo)航項(xiàng)都被設(shè)置為“display: inline;”，使它們水平排列。鏈接文本被定義為白色、粗體和大小為18像素。當(dāng)用戶將鼠標(biāo)懸停在導(dǎo)航項(xiàng)上時(shí)，顏色和背景顏色會(huì)反轉(zhuǎn)。
總體來說，這個(gè)導(dǎo)航欄盒子代碼非常簡單，但可以幫助我們輕松地在HTML網(wǎng)站上創(chuàng)建一個(gè)整潔的導(dǎo)航欄。