上查看所有课程
列表是按顺序显示的项目的集合。例如：
默认列表
- 乔治亚州
- 纽约
- 芝加哥
样式化列表
- 乔治亚州
- 纽约
- 芝加哥
上面的例子显示了一个默认列表和一个 CSS 样式列表。
列表类型
列表主要分为两类：
- 无序列表
- 有序列表
让我们简要地看一下它们。
无序列表
无序列表创建没有特定顺序的元素列表。
无序列表使用 `<ul>` 元素创建。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>浏览器输出
有序列表
有序列表按特定顺序排列元素。
有序列表使用 `<ol>` 元素创建。
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>浏览器输出
样式化你的列表
我们可以使用以下 CSS 属性来样式化我们的列表。
- list-style-type
- list-style-position
- list-style-image
- list-style (简写属性)
我们将详细介绍每一个。
CSS list-style-type 属性
`list-style-type` 属性指定列表中项目标记的类型。
`list-style-type` 属性的语法是：
list-style-type: none | all | list-type在这里，`list-style-type` 属性有以下常见值：
- `disc`: 指定一个实心圆
- `circle`: 指定一个空心圆
- `square`: 指定一个实心方块
- `decimal`: 表示从 1 开始的十进制数字
- `lower-alpha`: 指定小写 ASCII 字母
- `lower-roman`: 指定小写罗马数字
- `upper-alpha`: 指定大写 ASCII 字母
- `upper-roman`: 指定大写罗马数字
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS list-style-type</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p>list-style-type: disc</p>
<ul class="disc">
<li>Georgia</li>
<li>New York</li>
</ul>
</div>
<div>
<p>list-style-type: circle</p>
<ul class="circle">
<li>Georgia</li>
<li>New York</li>
</ul>
</div>
<div>
<p>list-style-type: square</p>
<ul class="square">
<li>Georgia</li>
<li>New York</li>
</ul>
</div>
<div>
<p>list-style-type: decimal</p>
<ul class="decimal">
<li>Georgia</li>
<li>New York</li>
</ul>
</div>
<div>
<p>list-style-type: lower-alpha</p>
<ul class="lower-alpha">
<li>Georgia</li>
<li>New York</li>
</ul>
</div>
<div>
<p>list-style-type: upper-alpha</p>
<ul class="upper-alpha">
<li>Georgia</li>
<li>New York</li>
</ul>
</div>
<div>
<p>list-style-type: upper-roman</p>
<ul class="upper-roman">
<li>Georgia</li>
<li>New York</li>
</ul>
</div>
</body>
</html>ul.disc {
list-style-type: disc;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ul.decimal {
list-style-type: decimal;
}
ul.lower-alpha {
list-style-type: lower-alpha;
}
ul.upper-alpha {
list-style-type: upper-alpha;
}
ul.upper-roman {
list-style-type: upper-roman;
}
div {
border: 1px solid;
padding: 8px;
}浏览器输出
上面的例子展示了使用 `list-style-type` 属性标记列表项的不同方法。
CSS list-style-position 属性
`list-style-position` 属性指定列表中列表标记的位置。列表标记的位置可以是列表项的内部或外部。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS list-style-position</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>list-style-position: inside</p>
<ul class="inside-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<p>list-style-position: outside</p>
<ul class="outside-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>.inside-list {
list-style-position: inside;
}
.outside-list {
list-style-position: outside;
}
li {
border: 1px solid black;
}浏览器输出
在上面的例子中：
- `list-style-position`: inside 将列表标记定位在列表项内部
- `list-style-position`: outside 将列表标记定位在列表项外部
注意：默认情况下，列表项标记位于外部。
CSS list-style-image 属性
`list-style-image` 属性允许我们使用自定义图像作为列表项标记。
`list-style-image` 属性的语法是：
list-style-image: none | url('image.url')这里，
- `none`: 指定不使用图像作为标记
- `url('image.url')`: 指定要用作标记的图像的 URL
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS list-style-image</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>ul {
list-style-image: url("https://openclipart.org/image/20px/183195");
}浏览器输出
在上面的例子中：
list-style-image: url("https://openclipart.org/image/20px/183195");为列表项指定自定义图像作为列表标记。
CSS list-style 属性
`list-style` 是一个简写属性，用于指定 `list-style-type`、`list-style-position` 和 `list-style-image` 属性。
`list-style` 属性的语法是：
list-style: [list-style-type] [list-style-position] [list-style-image]让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS list-style</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>ul {
list-style: square inside url("https://openclipart.org/image/20px/183195");
}浏览器输出
在上面的例子中：
list-style: square inside url('https://openclipart.org/image/20px/183195');等同于：
list-style-type: square;
list-style-position: inside;
list-style-image: url('https://openclipart.org/image/20px/183195');注意：如果浏览器找不到指定的 URL，则 `list-style-type` 属性仅应用于列表项标记。