HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>简单导航栏</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</body>
</html>
CSS样式（styles.css）：
body {
margin: 0;
font-family: Arial, sans-serif;
}
nav {
background-color: #333;
padding: 15px;
}
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;
}
这个例子创建了一个简单的水平导航栏，具有基本的样式和交互效果。导航栏的背景颜色是深灰色，导航链接是白色的。当鼠标悬停在链接上时，链接的背景颜色会变成浅灰色，文字颜色变为黑色。
你可以根据自己的需求修改颜色、字体、大小和其他样式。此外，这个例子是一个基本的静态导航栏，如果你需要一个响应式导航栏，你可能需要使用媒体查询或其他技术来适应不同的屏幕尺寸。
转载请注明出处：http://www.zyzy.cn/article/detail/12542/CSS