導(dǎo)航欄是一種圖形功能，允許用戶(hù)瀏覽網(wǎng)站或應(yīng)用程序。它通常以鏈接列表的形式呈現(xiàn)在屏幕的頂部或側(cè)面，并幫助用戶(hù)導(dǎo)航到網(wǎng)站內(nèi)的各個(gè)區(qū)域或頁(yè)面。 HTML 和 CSS 可用于構(gòu)建水平或垂直導(dǎo)航欄。
HTML 用于指定導(dǎo)航欄的結(jié)構(gòu)和內(nèi)容，而 CSS 用于設(shè)計(jì)并使導(dǎo)航欄看起來(lái)有吸引力。您可以通過(guò)添加導(dǎo)航欄來(lái)改善整體用戶(hù)體驗(yàn)，并使用戶(hù)更輕松地在您的網(wǎng)站上找到他們想要的內(nèi)容。
方法
使用 HTML 和 CSS 構(gòu)建導(dǎo)航欄的方法有多種，其中一些方法如下 –
使用無(wú)序列表 (UL)
使用導(dǎo)航標(biāo)簽
現(xiàn)在讓我們通過(guò)示例詳細(xì)了解每種方法。
使用無(wú)序列表(UL)
使用 HTML 和 CSS 構(gòu)建垂直導(dǎo)航欄的第一種方法是使用無(wú)序列表 (UL)。您可以使用無(wú)序列表 (UL) 和列表項(xiàng) (LI) 并用 CSS 裝飾它們，在 HTML 中制作導(dǎo)航欄。
示例
以下是在 HTML 和 CSS 中使用無(wú)序列表 (UL) 創(chuàng)建垂直導(dǎo)航欄的示例。
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
background-color: #333;
width: 200px;
height: 100%;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: block;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #111;
}
</style>
</head>
<body>
<div class="navbar">
<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>
</div>
</body>
</html>
登錄后復(fù)制
使用導(dǎo)航標(biāo)簽
使用 HTML 和 CSS 構(gòu)建垂直導(dǎo)航欄的第二種方法是使用導(dǎo)航標(biāo)簽。 HTML5添加了<nav>標(biāo)簽，該標(biāo)簽專(zhuān)門(mén)用于導(dǎo)航。您可以使用 <nav> 標(biāo)簽創(chuàng)建導(dǎo)航欄并使用 CSS 設(shè)置其樣式。
示例
以下是使用 HTML 和 CSS 中的導(dǎo)航標(biāo)簽創(chuàng)建垂直導(dǎo)航欄的示例。
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 200px;
height: 100%;
background-color: #333;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: block;
}
a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #111;
}
</style>
</head>
<body>
<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>
</body>
</html>
登錄后復(fù)制
結(jié)論
使用 HTML 和 CSS 創(chuàng)建垂直導(dǎo)航欄是一個(gè)簡(jiǎn)單的過(guò)程，可以通過(guò)多種方式完成。最常見(jiàn)的方法是使用無(wú)序列表 () 或
