How to change the list style of ordered / unordered list items in css
This article introduces the knowledge of "how to play with the list style of ordered / unordered list items in css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
In the unordered list ul > li, the flag of the wireless list is the dot that appears in front of each list. In the ordered list ol > li, there are numbers by default. How to modify the bullets in front of the list only needs to be adjusted through list-style. The common symbols are (/ content comments /) list-style-type:circle;/ hollow circle / list-style:none;/ removal flag / list-style:square;/ box / list-style:upper-roman;/ Roman numeral / list-style:lower-alpha;/list-style-type:upper-alpha Capital letters / list-style-type: decimal;/ serial numbers display / etc.!
one
two
three
four
five
6 how to play with the list style of ordered and unordered list items in css
seven
8 ul.box1 {
9 list-style-type:circle;/* hollow circle * /
10}
11 .box1 li {
12 list-style:none;/* removal flag * /
13 background-image: url ("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");/* image-text combination, add pictures in front of the list * /
14 height: 50px
15 background-repeat: no-repeat
16 background-size: 20px
17 / * set the background image size. The picture can retain its original size, or stretch to a new size, or zoom to the size of the element's free space while maintaining its original scale. , /
18 padding: 0px 25px 10pxram * adjust the inner margin up, left, right and down * /
19}
20 ul.box2 {
21 list-style:square;/* Square * /
22}
23 ul.box3 {
24 list-style:upper-roman;/* Roman numerals * /
25}
26 ul.box4 {
27 list-style:lower-alpha;/*list-style-type:upper-alpha; Capital letter * /
28}
29 ol.box5 {
30 list-style: none
31 list-style:upper-alpha
32 color: indianred
33}
thirty-four
thirty-five
thirty-six
thirty-seven
thirty-eight
39 abc
40 abc
41 abc
42 abc
43 abc
forty-four
forty-five
46 abc
47 abc
48 abc
49 abc
50 abc
fifty-one
fifty-two
53 abc
54 abc
55 abc
56 abc
57 abc
fifty-eight
fifty-nine
60 abc
61 abc
62 abc
63 abc
64 abc
sixty-five
sixty-six
sixty-seven
68 abc
69 abc
70 abc
71 abc
72 abc
seventy-three
seventy-four
seventy-five
This is the end of the content of "how to play with the list style of ordered / unordered list items in css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
