W3.CSS Lists (列表)

2020-11-30 16:40 更新

基本列表

w3-ul 类用来制作基本列表:

实例

<ul class="w3-ul">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

带边框的列表

w3-border 类用于增加列表的边框:

实例

<ul class="w3-ul w3-border">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

列表标题

如何在列表项内添加标题元素的示例:

实例

<ul class="w3-ul w3-border">

  <li><h2>名字</h2></li>

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

卡片化列表

使用 w3-card 类将列表卡片化:

实例

<ul class="w3-ul w3-card-4" style="width:50%">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

列表内容居中

用 w3-centered 类将列表的内容居中

实例

<ul class="w3-ul w3-center">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

彩色列表

w3-color 类可用于将颜色添加到列表:

实例

<ul class="w3-ul w3-red">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

彩色列表行

使用 w3-color 类来显示彩色行:

实例

<ul class="w3-ul">

  <li class="w3-blue">吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

悬停列表

w3-hoverable 类添加鼠标悬停时在列表上显示灰色的背景色:

实例

<ul class="w3-ul w3-hoverable">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

如果要使用特定的悬停颜色,请将 w3-hover-color  类添加到每个<li>元素:

实例

<ul class="w3-ul">
  <li class="w3-hover-red">吉尔<</li>
  <li class="w3-hover-blue">夏娃</li>
  <li class="w3-hover-green">亚当</li>
</ul>

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

可关闭列表项目

单击“ x”以关闭/隐藏列表项:

实例

<li class="w3-display-container">吉尔

  <span onclick="this.parentElement.style.display='none'"

  class="w3-button w3-display-right">×</span>

</li>


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

提示: HTML &times; 实体是关闭按钮的首选图标(而不是字母“ X”)。


带有填充的列表

w3-padding 类可用于将填充内容添加到列表项: 

实例

<ul class="w3-ul">

  <li class="w3-padding-small">吉尔</li>

  <li class="w3-padding-small">夏娃</li>

  <li class="w3-padding-small">亚当</li>

</ul>


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

头像列表

实例

<li class="w3-bar">

  <span onclick="this.parentElement.style.display='none'"

  class="w3-bar-item w3-button w3-xlarge w3-right">×</span>

  <img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">

  <div class="w3-bar-item">

    <span class="w3-large">迈克</span><br>

    <span>网页设计师</span>

  </div>

</li>


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

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


列表宽度

默认情况下,列表的宽度为 100%。使用 width 属性更改此设置。

实例

<ul class="w3-ul" style="width:30%">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

Tiny 列表

使用 w3-tiny 类制作 Tiny 列表:

实例

<ul class="w3-ul w3-tiny">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

Small 列表

使用 w3-small 类制作 Small 列表:

实例

<ul class="w3-ul w3-small">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

Large 列表

使用 w3-large 类制作 Large 列表:

实例

<ul class="w3-ul w3-large">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

XLarge 列表

使用 w3-xlarge 类制作 XLarge 列表:

实例

<ul class="w3-ul w3-xlarge">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

XXLarge 列表

使用 w3-xxlarge 类制作 XXLarge 列表:

实例

<ul class="w3-ul w3-xxlarge">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

XXXLarge 列表

使用 w3-xxxlarge 类显示 XXLarge 列表:

实例

<ul class="w3-ul w3-xxxlarge">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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

Jumbo 列表

使用 w3-jumbo 类制作 Jumbo 列表:

实例

<ul class="w3-ul w3-jumbo">

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


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


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号