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