Detailed explanation of the list-style-type attributes of Ul and Li in CSS

Reference materials:

list-style-typeUsage

Syntax:
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 default value. Solid circle
circle : CSS1 Hollow circle
square : CSS1 Solid square
decimal : CSS1 Arabic numeral
lower-roman : CSS1 Lowercase Roman numeral
upper-roman : CSS1 Uppercase Roman numeral
lower-alpha : CSS1 lowercase English letters
upper-alpha : CSS1 uppercase English letters
none : CSS1 Do not use bullets
armenianl : CSS2 is not supported. Traditional Armenian numerals
cjk-ideographic : Not supported by CSS2. Light ideographic numerals
georgian : Not supported by CSS2. Traditional Georgian numbers
lower-greek : Not supported by CSS2. Basic Greek lowercase letters
hebrew : Not supported by CSS2. Traditional Hebrew numerals
hiragana : Not supported by CSS2. Japanese hiragana characters
hiragana-iroha : Not supported by CSS2. Japanese Hiragana serial number
katakana : Not supported by CSS2. Japanese katakana characters
katakana-iroha : Not supported by CSS2. Japanese katakana serial number
lower-latin: Not supported by CSS2. Lowercase Latin letters
upper-latin : Not supported by CSS2. Uppercase Latin letters

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

Formatting of LI code:

A). Application CSS formatting list symbol:

ul li{ 
list-style-type:none; 
}

B). If you want to change the list symbol to an image, then:

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

C). For left alignment, 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 a 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; }

Note: display:block; this line must be added so that it can be displayed in block form!

F).The elements in LI are arranged horizontally, key FLOAT: LEFT:

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

The above is the detailed content of Detailed explanation of the list-style-type attributes of Ul and Li in CSS. For more information, please follow other related articles on the PHP Chinese website!