Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.