css美化导航栏
时间: 2023-07-25 14:06:55 浏览: 96
CSS导航栏效果
3星 · 编辑精心推荐
下面是一个简单的HTML和CSS代码,可以用来美化导航栏:
```
<!DOCTYPE html>
<html>
<head>
<title>美化导航栏</title>
<style>
nav {
background-color: #333; /* 导航栏背景颜色 */
overflow: hidden;
}
nav a {
float: left; /* 链接左浮动 */
color: #f2f2f2; /* 字体颜色 */
text-align: center; /* 文本居中 */
padding: 14px 16px; /* 链接内边距 */
text-decoration: none; /* 文本装饰 */
font-size: 17px; /* 字体大小 */
}
nav a:hover {
background-color: #ddd; /* 鼠标悬停时的背景颜色 */
color: black; /* 鼠标悬停时的字体颜色 */
}
nav a.active {
background-color: #4CAF50; /* 激活链接的背景颜色 */
color: white; /* 激活链接的字体颜色 */
}
</style>
</head>
<body>
<nav>
<a class="active" href="#">首页</a>
<a href="#">新闻</a>
<a href="#">联系我们</a>
<a href="#">关于我们</a>
</nav>
</body>
</html>
```
你可以根据自己的需要修改CSS样式,来达到不同的美化效果。
阅读全文