好看的网页导航栏代码
时间: 2023-10-14 10:06:00 浏览: 43
以下是一个简单的网页导航栏代码,你可以根据自己的需求进行修改和美化:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页导航栏</title>
<style type="text/css">
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="navbar">
<a class="active" href="#">首页</a>
<a href="#">新闻</a>
<a href="#">产品</a>
<a href="#">服务</a>
<a href="#">联系我们</a>
</div>
</body>
</html>
```
在这段代码中,我们使用了CSS样式来美化导航栏。其中,`.navbar`类定义了导航栏的背景颜色和溢出隐藏;`.navbar a`类定义了导航栏链接的样式;`.navbar a:hover`类定义了鼠标悬停时链接的样式;`.active`类定义了当前活动链接的样式。你可以根据需要修改这些样式来达到你想要的效果。