|
在无序列表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("https://pic.cnblogs.com/avatar/1350951/20200208114706.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前端学习圈⑤】
|