写一个顶部导航栏的代码
时间: 2024-09-28 07:15:08 浏览: 54
创建一个顶部导航栏的HTML和CSS基本代码可以像这样:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
/* 导航栏样式 */
.navbar {
display: flex;
justify-content: space-between;
background-color: #333;
padding: 10px 20px;
position: sticky; /* 固定顶部 */
top: 0;
z-index: 100;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline-block;
margin-right: 15px;
}
.navbar a {
color: white;
text-decoration: none;
font-size: 16px;
}
/* 鼠标悬停效果 */
.navbar a:hover {
color: #ff0000;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
```
这个例子中,我们创建了一个包含四个链接(如“首页”,“关于我们”等)的简单固定在顶部的导航栏。当鼠标悬停在链接上时,链接颜色会改变。
阅读全文