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

HTML 无序列表

❮ 上一节 下一节 ❯

HTML<ul>标签定义一个无序列表（项目符号）。

无序 HTML 列表

无序列表以<ul>标签。每个列表项都以<li>标签。

默认情况下，列表项将用项目符号（小黑圆圈）标记：

示例

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

亲自试一试 »

无序 HTML 列表 - 选择列表项标记

CSSlist-style-type属性用于定义列表项标记的样式。它可以具有以下值之一：

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

示例 - 光盘

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
亲自试一试 »

示例 - 圆

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
亲自试一试 »

示例 - 正方形

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
亲自试一试 »

示例 - 无

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
亲自试一试 »

嵌套 HTML 列表

列表可以嵌套（列表内列表）：

示例

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
亲自试一试 »

笔记：列表项 (<li>) 可以包含新列表和其他 HTML 元素，例如图片和链接等。

使用 CSS 的水平列表

HTML 列表可以使用 CSS 以多种不同的方式设置样式。

一种流行的方法是水平设置列表样式，以创建导航菜单：

示例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
亲自试一试 »

提示：您可以在我们的网站中了解有关 CSS 的更多信息CSS 教程。

章节总结

  • 使用 HTML<ul>定义无序列表的元素
  • 使用CSSlist-style-type属性来定义列表项标记
  • 使用 HTML<li>定义列表项的元素
  • 列表可以嵌套
  • 列表项可以包含其他 HTML 元素
  • 使用 CSS 属性float:left水平显示列表

HTML练习

通过练习测试一下

练习:

完成 HTML 代码以制作无序列表。


  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>

开始练习

HTML 列表标签

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

有关所有可用 HTML 标签的完整列表，请访问我们的HTML 标签参考。


❮ 上一节 下一节 ❯