W3.CSS 导航栏
水平柱状图
水平导航栏是常见的网页设计元素
w3-bar 类用于设置水平导航栏的样式
示例
<div class="w3-bar w3-green">
<div class="w3-bar-item">伦敦</div>
<div class="w3-bar-item">巴黎</div>
<div class="w3-bar-item">东京</div>
</div>
w3-bar-item 类的目的是提供正确的间距、内边距和定位。
垂直导航栏
垂直导航栏（侧边栏）在网页设计中也很常见
w3-bar-block 类用于设置垂直导航栏的样式
示例
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">伦敦</div>
<div class="w3-bar-item">巴黎</div>
<div class="w3-bar-item">东京</div>
</div>
导航栏颜色
您可以使用任何颜色来设置导航栏的样式
示例
<div class="w3-bar w3-black">
<div class="w3-bar-item">伦敦</div>
<div class="w3-bar-item">巴黎</div>
<div class="w3-bar-item">东京</div>
</div>
悬停颜色
您可以使用任何悬停颜色来设置导航栏的样式
将鼠标悬停在导航栏项上以查看效果
示例
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">伦敦</div>
<div class="w3-bar-item w3-hover-green">巴黎</div>
<div class="w3-bar-item w3-hover-blue">东京</div>
</div>
导航栏链接
提供导航是导航栏的典型用途
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">伦敦</a>
<a href="#" class="w3-bar-item w3-hover-green">巴黎</a>
<a href="#" class="w3-bar-item w3-hover-green">东京</a>
</div>
导航栏按钮
w3-button 类非常适合设置导航栏中链接的样式。
将鼠标悬停在导航栏项上以查看效果
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">伦敦</a>
<a href="#" class="w3-bar-item w3-button">巴黎</a>
<a href="#" class="w3-bar-item w3-button">东京</a>
</div>
响应式导航栏
w3-mobile 类非常适合使导航栏项实现响应式。
调整窗口大小以查看效果
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">伦敦</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">巴黎</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">东京</a>
</div>
右对齐导航栏项
w3-right 类非常适合使导航栏项右对齐
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">伦敦</a>
<a href="#" class="w3-bar-item w3-button">巴黎</a>
<a href="#" class="w3-bar-item w3-button w3-right">东京</a>
</div>
