html网页导航栏代码
一个简单的HTML导航栏通常由<ul>和<li>元素组成。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏示例</title>
<style>
/* 添加一些基本的样式以使导航栏看起来更好 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
overflow: hidden;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</body>
</html>
此示例包含一个简单的水平导航栏，每个导航项都是一个链接。你可以根据自己的需求修改链接的文本和目标 URL。CSS样式部分定义了基本的样式，你可以根据需要进行自定义。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive 导航栏</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
overflow: hidden;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
/* 添加响应式设计 */
@media screen and (max-width: 600px) {
nav ul {
display: none;
}
nav li {
float: none;
width: 100%;
text-align: center;
}
nav a {
display: block;
width: 100%;
box-sizing: border-box;
}
nav:hover ul {
display: block;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</body>
</html>
这个版本添加了一些媒体查询，以在屏幕宽度小于600像素时更好地适应移动设备。在这种情况下，导航栏的链接将隐藏，而在导航栏上悬停时则会显示。这是一种简单的响应式设计方法，你可以根据需要进行修改。
