HTML下的list w3c,W3.CSS Lists (列表)

基本列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

带边框的列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

列表标题

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

实例

• 名字

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

卡片化列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

列表内容居中

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

彩色列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

彩色列表行

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

悬停列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

如果要使用特定的悬停颜色，请将 w3-hover-color  类添加到每个

元素：

实例

• 吉尔<
• 夏娃
• 亚当

尝试一下 »

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

可关闭列表项目

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

实例

吉尔

class="w3-button w3-display-right">×

尝试一下 »

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

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

带有填充的列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

头像列表

实例

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

迈克

网页设计师

尝试一下 »

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

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

列表宽度

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

Tiny 列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

Small 列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

Large 列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

XLarge 列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

XXLarge 列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

XXXLarge 列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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

Jumbo 列表

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

实例

• 吉尔
• 夏娃
• 亚当

尝试一下 »

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