下面是一个简单的导航条CSS代码示例。请注意,这个示例需要与HTML代码结合使用才能正确显示导航条。这是一个基本的样式,你可以根据需要修改它以满足你的具体需求。
HTML部分:
```html
```
CSS部分:
```css
/* 设置导航条样式 */
.navbar {
list-style-type: none; /* 移除列表前的标记 */
margin: 0; /* 移除上下左右的边距 */
padding: 0; /* 移除上下左右的内边距 */
background-color: #333; /* 设置背景颜色 */
}
/* 设置导航条链接样式 */
.navbar li a {
display: block; /* 使链接显示为块级元素 */
color: white; /* 设置文字颜色 */
text-align: center; /* 设置文字居中对齐 */
padding: 14px 16px; /* 设置内边距 */
text-decoration: none; /* 移除下划线 */
}
/* 设置鼠标悬停时的链接样式 */
.navbar li a:hover {
background-color: #111; /* 鼠标悬停时的背景颜色 */
}
```
这个简单的导航条使用了基本的CSS样式,包括背景颜色、文字颜色、鼠标悬停效果等。你可以根据需要添加更多的样式,例如过渡动画、下拉菜单等。