html5导航条代码
当创建HTML5导航条时，通常会使用<nav>元素来定义导航栏的区域。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 导航条</title>
<style>
/* 添加一些基本样式，使导航条看起来更好 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
padding: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #ddd;
color: black;
}
</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>
在这个例子中，我们使用<nav>元素来定义导航条区域，然后使用<ul>和<li>元素创建一个无序列表，每个列表项包含一个导航链接<a>。添加了一些基本的CSS样式，使导航条具有一定的样式和交互效果。
