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>
