CSS 导航栏学习笔记
概述
CSS 导航栏是网页设计中常见的元素之一，用于实现网页的导航功能。它通常由若干个链接（菜单项）组成，在用户点击链接时跳转到相应的页面。一个好的导航栏可以提高网站的用户体验，使用户更方便地浏览网站内容。
实例
下面是一个简单的 CSS 导航栏实例：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 导航栏实例</title>
<style>
/* 导航栏容器 */
.navbar {
background-color: #333;
overflow: hidden;
}
/* 菜单项 */
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鼠标悬停效果 */
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">产品</a>
<a href="#">关于我们</a>
</div>
</body>
</html>
在这个实例中，我们定义了一个名为 .navbar 的 CSS 类，作为导航栏的容器。其中，background-color 属性设置了导航栏的背景颜色为深灰色，overflow 属性设置了当导航栏内容超出容器的宽度时，隐藏溢出部分。
每个菜单项都定义了一个 .navbar a 的 CSS 类，其中 float: left 属性使菜单项左浮动，color: white 属性设置了字体的颜色为白色，text-align: center 属性将菜单项中的文本居中显示，而 padding 属性则设置了菜单项容器的上下内边距为14像素，左右内边距为16像素。
最后，我们给 .navbar a:hover 类设置了鼠标悬停效果，使得在鼠标悬停到菜单项时，背景颜色变为浅灰色，字体颜色变为黑色。
总结
CSS 导航栏是网页设计中常用的元素之一。使用 CSS 可以轻松地创建出漂亮而实用的导航栏，提高用户体验。需要注意的是，导航栏的设计应该符合网站整体风格，且易于使用，避免给用户造成困扰和不便。