<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可交互导航栏</title>
<style>
body {
font-family: 微软雅黑; /* 设置页面字体为微软雅黑 */
}
.navbar {
background-color: red; /* 设置导航栏背景颜色为红色 */
overflow: hidden; /* 清除浮动，防止内容溢出 */
}
.navbar a {
float: left; /* 使导航链接左浮动 */
display: block; /* 将链接显示为块级元素 */
color: white; /* 设置链接文字颜色为白色 */
text-align: center; /* 设置文字居中对齐 */
padding: 14px 20px; /* 设置内边距 */
text-decoration: none; /* 去除链接下划线 */
transition: background-color 0.3s, color 0.3s; /* 设置背景颜色和文字颜色的过渡效果 */
}
.navbar a:hover {
background-color: burlywood; /* 设置鼠标悬停时的背景颜色 */
color: black; /* 设置鼠标悬停时的文字颜色 */
}
.navbar a.active {
background-color: blue; /* 设置当前活动链接的背景颜色 */
color: white; /* 设置当前活动链接的文字颜色 */
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home" class="active">首页</a>
<a href="#news">新闻</a>
<a href="#contact">联系我们</a>
<a href="#about">关于我们</a>
</body>
</html> 
扫一扫
1868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
