数据结构
网络
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 次浏览
广告