Examples of CSS list styles

CSS List

CSS List properties function as follows:

To set a different list item to mark as an ordered list

To set a different list item to mark as unordered list

Set list items to be marked as images

List

In HTML, there are two types of lists:

Unordered List-list item markers with special graphics (such as small black dots, small squares, etc.)

Sequence table-the list item is marked with a number or letter

Using CSS, you can list further styles and use the image as a list item marker.

A different list item tag

The List-style-type property specifies the type of the list item tag:

Instance

UL.A {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {List-style-type:upper-roman;} OL.D {List-style-type:lower-alpha;}

Some values are unordered lists, and some are sequential tables.

Image marked as a list item

To specify an image for a list item tag, use the list-style image property:

Instance

Ul{list-style-image:url (' Sqpurple.gif ');}

The above example is not the same in all browsers, IE and opera display image markers a little higher than Firefox, Chrome and Safari.

If you want to place the same image logo on all browsers, you should use a browser compatibility solution, as follows

Browser Compatibility Solutions

Also in all browsers, the following example will show the image tag:

Instance

ul{list-style-type:none;padding:0px;margin:0px;} UL Li{background-image:url (sqpurple.gif); background-repeat:no-repeat;background-position:0px 5px; Padding-left: 14px; }

Example Explanation:

Ul:

Set list style type to no delete list item marker

Set padding and margins 0px (browser compatibility)

All Li in ul:

Set the URL of the image and set it to show only once (No duplicates)

Location of the position image you need (left 0px and up and down 5px)

Use the Padding-left property bar to place the text in the list

List-abbreviation properties

You can specify all of the list properties in a single property. This is called the abbreviation attribute.

To use the abbreviated attribute for the list, the list style property is set as follows:

Instance

Ul{list-style:square URL ("Sqpurple.gif");}

If you use the abbreviated attribute values in the order:

List-style-type

List-style-position (see the following CSS property sheet for instructions)

List-style-image

If the above values are missing one, the remainder is still in the specified order, and it is not related.

"Recommended"

1. Special recommendation : "PHP Programmer Toolkit" V0.1 version download

2. Free CSS Online video tutorial

3. php.cn Lonely Nine-base (2)-css video tutorial