資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚學
法學只包含 HTML5 中導航連結的部分
可以使用文件中的 <nav> 標籤提供導航連結。nav 元素的連結指向其他網頁或同一網頁的不同部分。nav 元素的示例包括內容、表格、選單和索引。
語法
以下是在 HTML 中使用 <nav> 標籤的情況 −
<nav> Links…… </nav>
示例
以下示例嘗試建立一個包含只包含導航連結的部分方法 −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="nav-bar.css">
<h1>TutorialsPoint</h1>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<br>
<li>
<a href="#">Tutorials</a>
</li>
<br>
<li>
<a href="#">About</a>
</li>
<br>
<li>
<a href="#">Newsletter</a>
</li>
<br>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</body>
</html>
示例
以下為另一個示例 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background-color: grey;
}
ul {
background-color: orange;
text-align: center;
margin: 0px;
padding: 0px;
list-style: none;
}
li {
font-size: 24px;
line-height: 20px;
height: 40px;
padding: 5px;
display: inline-block;
}
a {
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<center>
<h1>TutorialsPoint</h1>
</center>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<br>
<li>
<a href="#">Tutorials</a>
</li>
<br>
<li>
<a href="#">About</a>
</li>
<br>
<li>
<a href="#">Newsletter</a>
</li>
<br>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</body>
</html>
示例
在以下示例中，我們將使用導航連結和子選單建立選單 −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>menu</title>
<style type="text/css">
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
border: 1px solid #5F9EA0;
}
ul li a {
background: #FFF8DC;
display: block;
padding: 8px 25px;
color: #5F9EA0;
text-decoration: none;
}
ul li a:hover {
color: #FFF8DC;
background: #5F9EA0;
}
ul li ul.dropdown {
min-width: 125px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown {
display: block;
}
ul li ul.dropdown li {
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<a href="Index.html">Home</a>
</li>
<li>
<a href="About.html">About</a>
</li>
<li>
<a href="Contact.html">Contact</a>
</li>
<li>
<a href="shop.html">Shop ▾</a>
<ul class="dropdown">
<li>
<a href="men.html">Mens</a>
</li>
<li>
<a href="women.html">Womens</a>
</li>
<li>
<a href="Accessories.html">Accessories</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
更新於：2023-10-10
176 瀏覽量
廣告