页面导航栏css代码
页面导航栏的 CSS 代码可以根据具体的设计需求和布局来编写，
css/* 导航栏容器样式 */
.navbar {
background-color: #333; /* 导航栏背景颜色 */
overflow: hidden;
}
/* 导航链接样式 */
.navbar a {
float: left; /* 将链接横向排列 */
display: block; /* 将链接转换为块级元素 */
color: #f2f2f2; /* 链接文字颜色 */
text-align: center; /* 文字居中 */
padding: 14px 20px; /* 上下左右内边距 */
text-decoration: none; /* 取消链接下划线 */
}
/* 鼠标悬停时链接样式 */
.navbar a:hover {
background-color: #ddd; /* 悬停时的背景颜色 */
color: black; /* 悬停时的文字颜色 */
}
/* 选中链接样式 */
.navbar a.active {
background-color: #666; /* 选中时的背景颜色 */
color: white; /* 选中时的文字颜色 */
}
这是一个简单的导航栏样式，具有基本的背景颜色、链接颜色、悬停效果和选中效果。你可以根据自己的需求进行修改和扩展。在 HTML 中使用这些样式，你需要确保将导航链接放在一个具有 navbar 类的容器内，并为当前活动页面的链接添加 active 类。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏示例</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入你的CSS文件 -->
<!-- 这里可以添加其他的头部元信息，比如引入字体、favicon等 -->
</head>
<body>
<div class="navbar">
<a class="active" href="#home">首页</a>
<a href="#news">新闻</a>
<a href="#contact">联系我们</a>
<a href="#about">关于我们</a>
</div>
<!-- 这里是页面的其他内容 -->
</body>
</html>
在这个HTML示例中，.navbar 类用于创建导航栏容器，其中的 <a> 元素表示导航链接。其中，class="active" 表示当前活动页面的链接，应用了导航栏中的选中样式。
你可以根据需要添加更多的导航链接，或者修改链接的文本内容、href属性等。
