CSS 列表
列表项符号
list-style-type 属性可以设置符号的样式。
符号样式有有序的和无序的。
无序列表
在无序列表中，list-style-type 属性的值是形状，它有值有：
- none 什么都没有
- disc 实心圆点
- circle 空心圆
- square 实心方块
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>项目符号样式-无序列表</title> <style> ol{ list-style-type:disc; } </style></head><body><h1>软件开发，成就梦想</h1><ol> <li>HTML 教程</li> <li>CSS 教程</li> <li>JavaScript 教程</li> <li>AI 教程</li> <ol></body></html> |
计算结果
有序列表
在有序列表中，list-style-type 属性的值是数值或字母或罗马数字，它有值有：
- decimal 数字
- decimal-leading-zero 数字前面有0
- lower-alpha 小写字母
- upper-alpha 大写字母
- lower-roman 小写罗马
- upper-roman 大写罗马
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>项目符号样式-有序列表</title> <style> ol{ list-style-type:lower-alpha; } </style></head><body><h1>软件开发，成就梦想</h1><ol> <li>HTML 教程</li> <li>CSS 教程</li> <li>JavaScript 教程</li> <li>AI 教程</li> <ol></body></html> |
计算结果
项目图像
list-style-image属性可以给列表前加个小图标
list-style-image属性的值是图片地址，list-style-image：url(图片地址)
下面的列子在列表项目前添加一个小星星。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>项目符号样式-有序列表</title> <style> ol{ list-style-image:url(star.png); } </style></head><body><h1>软件开发，成就梦想</h1><ol> <li>HTML 教程</li> <li>CSS 教程</li> <li>JavaScript 教程</li> <li>AI 教程</li> <ol></body></html> |
计算结果
附下载小星星的地址
列表项符号位置
默认情况下，列表项长时分行显示，列表项的文字会缩进到页面中，如下所示：
list-style-position 属性可以改变这种情况，让列表项符在文本的左则还是在文本的内部。
list-style-position 属性有两个值：
- outside 让列表项符在文本的左则
- inside 让列表项符在文本的内部
示例：
下面的代码，让列表项符在文本的内部。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>项目符号显示位置</title> <style> ul{ width:200px; list-style-position:inside; } </style></head><body><h1>软件开发，成就梦想</h1><ul> <li>欢迎您选择一种更高效的学习HTML和CSS的方式。</li> <li>通本系列教程，您可以设计出非常漂亮的网站。</li> <li>如您继续往下学习，手里掌托不仅是技术，更是远方！</li> <ul></body></html> |
计算结果：
快捷方式
list-style可以让您同时指定两种属性值：
- list-style-type list-style-position
- list-style-image list-style-position
这两种属性值没有先后顺序，谁先谁后都可以。
下面的示例列表项符号是小星星，在文本的内部显示。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>项目符号显示位置</title> <style> ul{ width:200px; list-style:url(star.png) inside; } </style></head><body><h1>软件开发，成就梦想</h1><ul> <li>欢迎您选择一种更高效的学习HTML和CSS的方式。</li> <li>通本系列教程，您可以设计出非常漂亮的网站。</li> <li>如您继续往下学习，手里掌托不仅是技术，更是远方！</li> <ul></body></html> |
计算结果：
