HTML 无序列表
HTML <ul> 标签定义了一个无序（项目符号）列表。
无序 HTML 列表
无序列表以 <ul> 标签开始。每个列表项以 <li> 标签开始。
默认情况下，列表项将用项目符号（小黑圆圈）标记。
无序 HTML 列表 - 选择列表项标记
CSS list-style-type 属性用于定义列表项标记的样式。它可以有以下值之一：
| 值 | 描述 |
|---|---|
| disc | 将列表项标记设置为项目符号（默认） |
| circle | 将列表项标记设置为圆圈 |
| square | 将列表项标记设置为正方形 |
| none | 列表项将不被标记 |
嵌套 HTML 列表
列表可以嵌套（列表内部的列表）
注意：列表项（<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">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系我们</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
自己动手试一试 »
Tip: You can learn much more about CSS in our CSS Tutorial.
Chapter Summary
- 使用 HTML
<ul>元素定义无序列表 - 使用 CSS
list-style-type属性定义列表项标记 - 使用 HTML
<li>元素定义列表项 - 列表可以嵌套
- 列表项可以包含其他 HTML 元素
- 使用 CSS 属性
float:left以水平方式显示列表
HTML 列表标签
| 标签 | 描述 |
|---|---|
| <ul> | 定义无序列表 |
| <ol> | 定义有序列表 |
| <li> | 定义列表项 |
| <dl> | 定义描述列表 |
| <dt> | 定义描述列表中的术语 |
| <dd> | 描述描述列表中的术语 |
有关所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。
