免费AI编程助手
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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
类的目的是提供正确的间距，内边距和位置。
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>
<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>
<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>
<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>
<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>
<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>
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
以上内容是否对您有帮助：
更多建议：