W3.CSS 栏

伦敦

巴黎

东京

伦敦

巴黎

东京

伦敦

巴黎

东京

伦敦

巴黎

东京

单杠

单杠是常见的网页设计元素：

伦敦

巴黎

东京

这个w3-酒吧class 用于设置水平条的样式：

示例

<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 栏项目类的目的是提供正确的间距、填充和定位。

竖条

竖条（侧边栏）在网页设计中也很常见：

伦敦

巴黎

东京

这个w3-酒吧-块类用于设置垂直条的样式：

示例

<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按钮类非常适合在酒吧中设置链接样式。

将鼠标悬停在栏项上即可查看效果：

伦敦

巴黎

东京

伦敦

巴黎

东京

示例

<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-移动类非常适合使酒吧项目具有响应能力。

调整窗口大小查看效果：

伦敦

巴黎

东京

示例

<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-右类非常适合使栏项目右对齐：

伦敦

巴黎

东京

示例

<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>

亲自试一试»