Use CSS to define <li> and <hr> styles

I was planning to write an article on the topic of this article, but I recently read this article in The Sina blog group, so I don't have to worry about it. I will repost it here to help you.
Li {list-style-image: url (images/disc.gif );}
This style definition of li is to use an image of the List Project to replace the small dots displayed. Of course, you can also display other effects. For details, see the following definitions:
CSS definition of list project effects
* List-style-type: circle (you can change it to the style you want); list project style
Disc: CSS1 solid circle
Circle: CSS1 hollow circle
Square: CSS1 solid square
Decimal: CSS1 Arabic numerals
Lower-roman: CSS1 lowercase roman numerals
Upper-roman: CSS1 uppercase roman numerals
Lower-alpha: CSS1 lowercase English letter
Upper-alpha: CSS1 capital English letter
None: CSS1 does not use the project symbol
Armenian: traditional Armenia numbers in CSS2
Cjk-ideographic: CSS2 basic ideographic number
Georgian: CSS2 traditional George number
Lower-greek: basic greek lowercase letters in CSS2
Hebrew: CSS2 traditional hebrew numbers
Hiragana: CSS2 Japanese Hirakana
Hiragana-iroha: CSS2 Japanese Hirakana
Katakana: CSS2 Japanese katakana
Katakana-iroha: CSS2 Japanese katakana No.
Lower-latin: CSS2 lowercase latin letters
Upper-latin: CSS2 capital latin letters
* List-style-image: url (images/disc.gif); use disc.gif to display the list items.
* List-style-position: outside | inside
Outside: The list item tag is placed outside the text and the surrounding text is not aligned according to the tag
Inside: The list item tag is placed within the text and the surrounding text is aligned according to the tag
Hr {border: 1px dashed #86BCD4; height: 1 ;}
In HTML code, some special items such as horizontal hr can also be defined in style management to change the default display effect:
CSS definition of horizontal effect
BORDER-BOTTOM-STYLE: dotted;
BORDER-LEFT-STYLE: dotted;
BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted;
Height: 1;
Width: 100%;
Align: left;
Color: #86BCD4;
Shade: no;
Definition of the horizontal dotted line effect
Border: 1px dashed #86BCD4; height: 1;