用html css做一个带图标的导航栏代码
时间: 2024-01-25 18:04:19 浏览: 24
好的,以下是一个简单的带图标的导航栏代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>带图标的导航栏</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav a.active {
background-color: #4CAF50;
color: white;
}
nav a.icon {
display: none;
}
@media screen and (max-width: 600px) {
nav a:not(:first-child) {
display: none;
}
nav a.icon {
float: right;
display: block;
}
}
</style>
</head>
<body>
<nav>
<a href="#" class="active"><i class="fa fa-home"></i> 首页</a>
<a href="#"><i class="fa fa-user"></i> 个人中心</a>
<a href="#"><i class="fa fa-envelope"></i> 消息</a>
<a href="#"><i class="fa fa-gear"></i> 设置</a>
<a href="#" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</nav>
<script>
function myFunction() {
var x = document.getElementsByTagName("nav")[0];
if (x.className === "") {
x.className = "responsive";
} else {
x.className = "";
}
}
</script>
</body>
</html>
```
这段代码中使用了 Font Awesome 图标库,并且实现了响应式布局,当屏幕宽度小于 600px 时,导航栏会变成一个下拉菜单。