How to set the style of ordered and unordered list items in CSS

In an unordered list ul>li, the symbol of an unordered list is a dot that appears in front of each list. In the ordered list ol>li, there is a number in front by default. To change the bullet point in front of the list, you only need to adjust it through list-style. Common symbols include (/*content comment part*/) list-style-type:circle;/*hollow circle*/list-style:none;/*remove the sign*/list-style:square;/*square*/list-style:upper-roman;/*Roman numerals*/list-style:lower-alpha;/*list-style-type:upper-alpha; uppercase letters*/, etc.!

The code looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to play with ordered and unordered list items in CSS</title>
    <style type="text/css">
    ul.box1{
        list-style-type:circle;/*hollow circle*/
    }
    .box1 li{
        list-style:none;/*Remove the logo*/
        background-image: url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");/*Combination of pictures and text, add pictures in front of the list*/
        height: 50px;
        background-repeat: no-repeat;
        background-size: 20px;
        /*Set the background image size. The image can remain at its original size, be stretched to a new size, or be scaled to fit the available space in the element while maintaining its original proportions. */
        padding: 0px 25px 10px;/*Adjust the inner margins top, left, right and bottom*/
    }
    ul.box2{
        list-style:square;/*square*/
    }
    ul.box3{
        list-style:upper-roman;/*Roman numerals*/
    }
    ul.box4{
        list-style:lower-alpha;/*list-style-type:upper-alpha;Capital letters*/
    }
    ol.box5{
        list-style: none;
        list-style:upper-alpha;
        color: indianred;
    }
    </style>
</head>
<body>
    <!-- Wireless List -->
    <ul class="box1">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <ul class="box2">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <ul class="box3">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <ul class="box4">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <!-- Unordered list replaces ul>li with ol>li ordered list, with a number in front by default-->
    <ol class="box5">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ol>
</body>
</html>

Summarize

The style described is the list style setting method of ordered and unordered list items in CSS introduced by the editor. I hope it will be helpful to everyone!

<<: js simulation to achieve the effect of enlarging the picture on the Jingdong details page

>>: Common properties of frameset (dividing frames and windows)