W3.CSS Bars (栏)

2020-11-23 11:13 更新

Horizontal Bars

Horizontal Bars 是常见的网页设计元素:

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 

类的目的是提供正确的间距,内边距和位置。


Vertical Bars

Vertical bars (侧边栏)在网页设计中也很常见:
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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

Bar Colors

您可以使用任何颜色来设置条形:

实例

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

尝试一下 »
点击“尝试一下”按钮查看在线实例

Hover Colors

您可以使用任何 Hover Colors 来设置条形; 
将鼠标悬停在条上以查看效果:

实例

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

尝试一下 »
点击“尝试一下”按钮查看在线实例

Bar Links

提供导航是 bar 的典型用途:

实例

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

尝试一下 »
点击“尝试一下”按钮查看在线实例

Bar Buttons

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>

尝试一下 »
点击“尝试一下”按钮查看在线实例

Responsive Bar

w3 mobile 类非常适合于使 bar 项目具有响应性。

实例

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

尝试一下 »
点击“尝试一下”按钮查看在线实例

Right-Aligned Bar Items

w3 right 类非常适合使 bar 项目右对齐:

实例

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

尝试一下 »
点击“尝试一下”按钮查看在线实例
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号