資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用HTML和CSS建立垂直導航欄？
導航欄是一個圖形化功能，允許使用者瀏覽網站或應用程式。它通常以螢幕頂部或側面的連結列表的形式呈現，幫助使用者瀏覽網站內的各個區域或頁面。HTML 和 CSS 可用於構建水平或垂直導航欄。
HTML 用於指定導航欄的結構和內容，而 CSS 用於設計和美化導航欄的外觀。新增導航欄可以改善整體使用者體驗，並使使用者更容易找到他們在網站上想要查詢的內容。
方法
使用 HTML 和 CSS 構建導航欄有多種方法，其中一些方法如下：
使用無序列表 (UL)
使用 Nav 標籤
現在讓我們詳細瞭解每種方法並舉例說明。
使用無序列表 (UL)
使用 HTML 和 CSS 構建垂直導航欄的第一種方法是使用無序列表 (UL)。您可以使用無序列表 (UL) 和列表項 (LI) 在 HTML 中建立導航欄，並使用 CSS 對其進行裝飾。
示例
這是一個使用 HTML 和 CSS 中的無序列表 (UL) 建立垂直導航欄的示例。
<!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>
使用 Nav 標籤
使用 HTML 和 CSS 構建垂直導航欄的第二種方法是使用 Nav 標籤。HTML5 添加了 <nav> 標籤，該標籤專門用於導航。您可以使用 <nav> 標籤建立導航欄，並使用 CSS 對其進行樣式設定。
示例
這是一個使用 HTML 和 CSS 中的 Nav 標籤建立垂直導航欄的示例。
<!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>
結論
使用 HTML 和 CSS 建立垂直導航欄是一個簡單的過程，可以透過多種方式完成。最常用的方法是使用無序列表 (<ul>) 或 <nav> 標籤。無論您採用哪種方法，HTML 程式碼的基本結構都將保持不變：一個容器元素（<ul> 或 <nav>），其中包含由列表項 (<li>) 和錨點標籤 (<a>) 表示的導航連結。CSS 允許您完全自定義導航欄的設計，包括導航連結的背景顏色、寬度、高度和文字樣式。透過使用 HTML 和 CSS，您可以為您的網站建立功能強大且視覺上吸引人的導航欄。
5000+ 次瀏覽
