导航栏的CSS代码可以根据你的具体需求有所不同。下面是一个基本的导航栏样式示例:
HTML 结构:
```html
```
对应的 CSS 代码:
```css
/* 导航栏样式 */
nav {
width: 100%; /* 宽度可以根据需要调整 */
background-color: #333; /* 背景颜色可以根据需要调整 */
}
.navbar {
list-style-type: none; /* 移除列表前的标记 */
margin: 0; /* 移除上下边距 */
padding: 0; /* 移除左右边距 */
display: flex; /* 使用 Flexbox 布局 */
}
.navbar li {
flex: 1; /* 让列表项平分空间 */
}
.navbar li a {
display: block; /* 将链接设为块级元素 */
color: white; /* 文字颜色 */
text-align: center; /* 文字居中对齐 */
padding: 14px 16px; /* 内边距,可以根据需要调整 */
text-decoration: none; /* 移除下划线 */
}
/* 鼠标悬停时的样式 */
.navbar li a:hover {
background-color: #ddd; /* 鼠标悬停时的背景颜色 */
color: black; /* 鼠标悬停时的文字颜色 */
}
```
这个代码将会创建一个基础的横向导航栏,包含了四个链接:"首页","关于我们","服务","联系我们"。每个链接平均分配宽度,鼠标悬停在链接上时,链接的背景颜色会改变。你可以根据你的需求对这个样式进行修改。