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)

Detailed explanation of the front-end framework for low-threshold development of iOS, Android, and mini-program applications

Nowadays, cross-platform development technology i...

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

Write a formal blog using XHTML CSS

A comparison between the href attribute and onclick event of the a tag

18 common commands in MySQL command line

Avoid abusing this to read data in data in Vue

What to do if the online MySQL auto-increment ID is exhausted

How to solve the problem of -bash: /usr/bin/yum: No such file or directory after typing yum in linux

The table merges cells and the img image to fill the entire td HTML

The marquee tag in HTML achieves seamless scrolling marquee effect

Detailed tutorial on installing MySQL 8.0 from source code on CentOS 7.4

Detailed example of MySQL (5.6 and below) parsing JSON

Recommend

TypeScript learning notes: type narrowing

15 lines of CSS code can cause Apple devices to crash, and the latest iOS 12 is not immune

HTML Language Encyclopedia

Detailed explanation of the front-end framework for low-threshold development of iOS, Android, and mini-program applications

CSS Sticky Footer Implementation Code

Implementation steps for building Webpack5-react scaffolding from scratch (with source code)

Detailed analysis of the MySQL slow log opening method and storage format

MySQL database implements MMM high availability cluster architecture

How to install mysql5.7.24 binary version on Centos 7 and how to solve it

Implementation of mysql using mysqlbinlog command to restore accidentally deleted data

Vue+Echart bar chart realizes epidemic data statistics

Detailed explanation of JavaScript private class fields and TypeScript private modifiers

MySQL Optimization: Cache Optimization (Continued)

Time zone issues with Django deployed in Docker container

The specific use and difference between attribute and property in Vue