css 样式 导航栏样式 |纯css标签切换

如何使用 CSS 来实现一个简单的导航栏呢？以下是一个基本的CSS样式代码，其中使用了 pre 标签来显示css代码：

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}

上述代码中，大家采用了 .navbar 的类来定义整个导航栏的样式。设置了导航栏的定位，背景颜色和宽度等基础样式。同时，大家采用了 .navbar ul 来定义导航栏中的菜单。使用了 float 属性来使其在同一行内并靠左对齐。大家还定义了单个菜单项的样式，设置了文字颜色，对齐方式，边距等样式。

最后，在 .navbar li a:hover 中，大家定义了当用户鼠标悬停在菜单项上时的样式，让其在当前菜单项下显示不同颜色，以便于提醒用户当前所在页面的位置。

上述的代码样式可以为你提供一个很基础的导航栏，当然，具体的样式设计会因项目而异，希望上述代码样式可以为读者提供一些参考。