，指向不同的页面或部分。
二、CSS样式设计
接下来，我们将通过CSS来美化这个横版导航栏。以下是一些关键的CSS样式：
/* 版心样式 */
.w {
width: 1200px;
margin: auto;
}
/* 导航栏样式 */
.navbar {
width: 100%;
background-color: #fff;
margin-top: 10px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
/* 导航列表样式 */
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
/* 导航链接样式 */
.navbar a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
font-size: 16px;
}
/* 鼠标悬停样式 */
.navbar a:hover {
background-color: #f1f1f1;
}
这段CSS代码设置了导航栏的宽度、背景颜色、阴影效果，并对导航列表和链接进行了样式设置。我们还为链接添加了鼠标悬停效果，使其更加友好。
三、响应式设计
为了确保导航栏在不同设备上的兼容性，我们可以使用媒体查询来实现响应式设计：
@media screen and (max-width: 768px) {
.navbar ul {
flex-direction: column;
}
}
这段代码确保当屏幕宽度小于768像素时，导航栏的链接会垂直排列，从而适应小屏幕设备。
四、功能增强
除了基本的样式设置，我们还可以为导航栏添加一些高级功能，例如搜索框、用户登录等。以下是一个添加搜索框的示例：
/* 搜索框样式 */
.navbar input[type=”text”] {
padding: 5px 10px;
margin-top: 10px;
}
通过以上代码，我们为导航栏添加了一个搜索框，方便用户进行搜索。
五、总结
通过本文的介绍，相信你已经掌握了如何使用CSS创建一个横版导航栏。在实际应用中，可以根据具体需求调整样式和功能，以提升用户体验。希望这些技巧能够帮助你打造出美观且实用的横版导航栏。