CSS list

CSS List

CSS list properties function as follows:

Set different list items to be marked as ordered List
Set different list items marked as unordered list
Set list items marked as images

List

In HTML, there are two types of lists:

Unordered list - list items are marked with special graphics (such as small black dots, small boxes, etc.)
Ordered list - list items are marked with numbers or letters

Using CSS, the list can be further styled and images can be used as list item markers.

Different list item markers

The list-style-type attribute specifies the type of list item marker: :

Example

php中文网(php.cn)

无序列表实例:

香蕉
苹果
橙子

香蕉
苹果
橙子

有序列表实例:

香蕉
苹果
橙子

香蕉
苹果
橙子

Run the program to try it

Some values are unordered lists, and some are ordered lists.

Image as list item marker

To specify an image for list item marker, use the list style image property:

Example

    php中文网(php.cn)  
   Coffee
 Tea
 Coca Cola

Run the program and try it

Example

All the different list item tags

php中文网(php.cn)

不同的列表项标记

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

香蕉
苹果
梨子

Run the program to try it out

CSS list properties

Attribute	Description
list-style	Abbreviation attribute. Used to set all properties for a list in one statement
list-style-image	Sets the image as the list item flag.
list-style-position	Set the position of the list item mark in the list.
list-style-type	Set the type of list item flag.