html网页导航栏制作代码
时间: 2023-12-26 17:28:57 浏览: 92
以下是一个简单的HTML网页导航栏制作代码的例子:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="navbar">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<h3>网页内容</h3>
<p>这是一个示例网页。</p>
</body>
</html>
```
这段代码创建了一个简单的水平导航栏,其中包含了四个链接:Home、News、Contact和About。导航栏的样式可以通过CSS进行自定义,例如背景颜色、字体颜色、悬停效果等。你可以根据自己的需求进行修改和扩展。
阅读全文