在无序列表ul>li中，无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中，前面默认带有数字，如何修改列表前面的项目符号，只需要通过list-style调整就好，常见的符号有(/内容注释部分/)list-style-type:circle;/空心圆/list-style:none;/去除标志/list-style:square;/方块/list-style:upper-roman;/罗马数字/list-style:lower-alpha;/list-style-type:upper-alpha;大写字母/list-style-type: decimal;/序号数字展示/等！
1
2
3
4
5
6
css如何玩转有序无序列表项list样式
7
8 ul.box1{
9 list-style-type:circle;/*空心圆*/
10 }
11 .box1 li{
12 list-style:none;/*去除标志*/
13 background-image: url("/avatar/1350951/0208114706.png");/*图文结合，列表前面添加图片*/
14 height: 50px;
15 background-repeat: no-repeat;
16 background-size: 20px;
17 /*设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。*/
18 padding: 0px 25px 10px;/*调整内边距 上 左右 下*/
19 }
20 ul.box2{
21 list-style:square;/*方块*/
22 }
23 ul.box3{
24 list-style:upper-roman;/*罗马数字*/
25 }
26 ul.box4{
27 list-style:lower-alpha;/*list-style-type:upper-alpha;大写字母*/
28 }
29 ol.box5{
30 list-style: none;
31 list-style:upper-alpha;
32 color: indianred;
33 }
34
35
36
37
38
39
abc
40
abc
41
abc
42
abc
43
abc
44
45
46
abc
47
abc
48
abc
49
abc
50
abc
51
52
53
abc
54
abc
55
abc
56
abc
57
abc
58
59
60
abc
61
abc
62
abc
63
abc
64
abc
65
66
67
68
abc
69
abc
70
abc
71
abc
72
abc
73
74
75
从最零基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】都有整理，在线解析，学习指导，点：【WEB前端学习圈⑤】
