码农教程 - 一技在手,衣食无忧! tools

W3.CSS 列表

❮ 上一节 下一节 ❯
  • ×
    麦克风
    网站设计者
  • ×
    吉尔
    支持
  • ×
    简
    会计

基本清单

这个w3-ul类用于显示基本列表：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

带边框的列表

这个w3边框类在列表周围添加边框：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

列表标题

如何在列表项中添加标题元素的示例：

  • 名称

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-border">
  <li><h2>Names</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

列为卡片

这个w3-卡-数字类可用于将列表显示为卡片：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-card-4" style="width:50%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

居中列表

这个w3-中心类可用于将列表项置于列表中：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

彩色列表

这个w3-颜色类可用于向列表添加颜色：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

彩色列表项目

这个w3-颜色类可用于向列表项添加颜色：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

可悬停列表

这个w3-可悬停类在鼠标悬停时为每个列表项添加灰色背景颜色：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

如果您想要特定的悬停颜色，请添加任何w3-悬停-颜色每个 <li> 元素的类：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul">
  <li class="w3-hover-red">Jill</li>
  <li class="w3-hover-blue">Eve</li>
  <li class="w3-hover-green">Adam</li>
</ul>
亲自试一试»

可关闭列表项

单击"x" 关闭/隐藏列表项：

  • 吉尔×
  • 亚当×
  • 前夕×

示例

<li class="w3-display-container">Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-right">&times;</span>
</li>
亲自试一试»

提示：HTML ×实体是关闭按钮的首选图标（而不是字母 "X"）。

带填充的列表

这个w3-填充类可用于向列表项添加填充：

  • 吉尔
  • 前夕
  • 亚当
  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul">
  <li class="w3-padding-small">Jill</li>
  <li class="w3-padding-small">Eve</li>
  <li class="w3-padding-small">Adam</li>
</ul>
亲自试一试»

头像列表

  • ×
    麦克风
    网站设计者
  • ×
    吉尔
    支持
  • ×
    简
    会计

示例

<li class="w3-bar">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-bar-item w3-button w3-xlarge w3-right">&times;</span>
  <img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
  <div class="w3-bar-item">
    <span class="w3-large">Mike</span><br>
    <span>Web Designer</span>
  </div>
</li>
亲自试一试»

提示：您将在我们的中了解有关 w3-bar 类的更多信息W3.CSS 栏和W3.CSS导航章节。

列表宽度

默认情况下，列表的宽度为 100%。使用 width 属性来更改它。

示例

<ul class="w3-ul" style="width:30%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

30% 宽度：

  • 吉尔
  • 亚当

50% 宽度：

  • 吉尔
  • 亚当

80% 宽度：

  • 吉尔
  • 亚当

小清单

使用w3-小类来显示一个小列表：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

小名单

使用w3-小号显示小列表的类：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

大名单

使用w3-大号显示大列表的类：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

超大清单

使用w3-超大显示超大列表的类：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

XX大清单

使用w3-xxlarge显示 XXLarge 列表的类：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

XXX大名单

使用w3-xxxlarge显示 XXXLarge 列表的类：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

巨型列表

使用w3-巨型类来显示巨大的"jumbo"列表：

  • 吉尔
  • 前夕
  • 亚当

示例

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试»

❮ 上一节 下一节 ❯