A detailed description of the List-style-type properties of UL and Li in CSS

Resources:

The use of List-style-type

Grammar:
List-style-type:disc | Circle | Square | decimal | Lower-roman | Upper-roman | Lower-alpha | Upper-alpha | none | Armenian | cjk-ideographic | Georgian | Lower-greek | Hebrew | Hiragana | Hiragana-iroha | Katakana | Katakana-iroha | Lower-latin | Upper-latin

Value:
Disc:css1 the default value. Solid Circle
Circle:css1 Hollow Circle
SQUARE:CSS1 Solid Block
Decimal:css1 Arabic numerals
Lower-roman:css1 Lowercase Roman Numerals
Upper-roman:css1 Capital Roman Numerals
Lower-alpha:css1 lowercase English alphabet
Upper-alpha:css1 Capital English alphabet
None:css1 Do not use bullets
Armenianl:css2 not supported. The traditional Armenian numerals
Cjk-ideographic:css2 not supported. Plain, ideographic numerals
Georgian:css2 not supported. The traditional George number
Lower-greek:css2 not supported. Basic Greek Small Letter
Hebrew:css2 not supported. The traditional Hebrew numerals
Hiragana:css2 not supported. Japanese Hiragana characters
Hiragana-iroha:css2 not supported. Japanese Hiragana serial Number
Katakana:css2 not supported. Japanese Katakana Characters
Katakana-iroha:css2 not supported. Japanese Katakana Serial Number
Lower-latin:css2 not supported. lowercase Latin alphabet
Upper-latin:css2 not supported. Uppercase Latin alphabet

－－－－－－－－－－－－－－－－－－－

The format of the Li code:

A). Use CSS to format list characters:

UL li{List-style-type:none;}

B). If you want to change the list character to an image:

UL li{List-style-type:none; List-style-image:url (images/icon.gif);}

C). To align Left, you can use the following code:

ul{list-style-type:none; margin:0px;}

D). If you want to add a background color to the list, you can use the following code:

ul{list-style-type:none; margin:0px;} ul li{background: #CCC;}

E). If you want to add the mouseover background color effect to the list, you can use the following code:

ul{list-style-type:none; margin:0px;} ul li a{display:block; width:100%; background: #ccc;} ul li a:hover{background : #999; }

Description: Display:block; this line must be added in order to block the display!

F). The elements in Li are arranged horizontally, with the key float:left:

ul{list-style-type:none; width:100%;} ul li{width:80px; float:left;}