```html
/ 导航栏的基本样式 /
.navbar {
background-color: 333;
overflow: hidden;
}
/ 链接的样式 /
.navbar a {
float: left;
display: block;
color: f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/ 鼠标悬停时改变颜色 /
.navbar a:hover {
background-color: ddd;
color: black;
}
```
这个代码片段展示了如何构建一个简单的水平导航栏,并通过CSS进行样式设置。导航栏包含了四个链接:“首页”、“服务”、“关于我们”和“联系我们”。每个链接在鼠标悬停时会改变背景色和文字颜色,以提供更好的用户体验。
你可以根据需要调整CSS样式,比如更改颜色、添加图标等,使导航栏更加个性化。希望这段代码对你有所帮助!