W3.CSS

London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo

水平栏

水平栏是常见的网页设计元素:

London
Paris
Tokyo

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 类的目的是提供正确的间距、内边距和定位。


侧边栏

竖条(侧边栏)在网页设计中也很常见:

London
Paris
Tokyo

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>

亲自试一试 »


栏颜色

您可以使用任何颜色来设置栏的样式:

London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo

实例

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

亲自试一试 »


悬停颜色

您可以使用任何悬停颜色来设置栏的样式:

将鼠标悬停在栏目上以查看效果:

London
Paris
Tokyo

London
Paris
Tokyo

实例

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

将鼠标悬停在栏目上以查看效果:

London
Paris
Tokyo

London
Paris
Tokyo

实例

<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 类非常适合让栏目响应。

调整窗口大小看效果:

London
Paris
Tokyo

实例

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

London
Paris
Tokyo

实例

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

亲自试一试 »