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)

Tips for importing csv, excel or sql files into MySQL

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

Tips for importing csv, excel or sql files into MySQL

Implementation of inserting millions of records into MySQL database within 10 seconds

js implements the pop-up login box by clicking the pop-up window

Example of ellipsis when CSS multi-line text overflows

Example of using Vue built-in component keep-alive

Let's talk about what JavaScript's URL object is

How to modify the firewall on a Linux server to allow remote access to the port

Complete steps to reset the root user password in mysql8

Intellij IDEA quick implementation of Docker image deployment method steps

Basic implementation method of cross-component binding using v-model in Vue

Recommend

Nginx improves access speed based on gzip compression

A simple way to put HTML footer at the bottom of the page

How to use the name attribute and id attribute of the a tag to jump within the page

Vue uses the Element el-upload component to step on the pit

Basic knowledge: What does http mean before a website address?

Podman boots up the container automatically and compares it with Docker

Learn how to use JavaScript's new Element Traversal property to traverse child elements

Detailed explanation of Linux netstat command

Use of Linux cal command

js to realize login and registration functions

Why can't the MP4 format video embedded in HTML be played?

Mysql queries the transactions being executed and how to wait for locks

Super simple qps statistics method (recommended)

Setting up Docker proxy under CentOS 7 (environment variable configuration of Systemd service under Linux)

Several situations where div is covered by iframe and their solutions