Explain in detail the definition of list items and horizontal lines in CSS

css| Project

This tutorial mainly explains the definition of the style of common tags <li> and

Li {list-style-image:url (images/disc.gif);}

This style definition for Li is to use a picture for a list item instead of a small dot that is displayed. Of course, you can also display other effects, see the following definition in detail:

　　CSS definition of the effect of a list item

*list-style-type:circle (You can change the style you want); List Item 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 Capital Roman Numerals

Lower-alpha:css1 lowercase English Letter

Upper-alpha:css1 Capital English alphabet

NONE:CSS1 does not use bullets

Armenian:css2 the traditional Armenian numbers

Cjk-ideographic:css2 the plain ideographic figure

Georgian:css2 the traditional George number

LOWER-GREEK:CSS2 Basic Greek lowercase letters

Hebrew:css2 the traditional Hebrew numbers

Hiragana:css2 Japanese plain Kana character

Hiragana-iroha:css2 Japanese Hiragana Order

Katakana:css2 Japanese piece Kana character

Katakana-iroha:css2 Japanese Katakana Number

Lower-latin:css2 Lowercase Latin alphabet

Upper-latin:css2 Capital Letter Latin

*list-style-image:url (images/disc.gif); Use image disc.gif instead of list item display

*list-style-position:outside | Inside

Outside: List item tag is placed outside the text and the wrapping text is not aligned to the mark

Inside: List item tag is placed within the text and the wrapping text is aligned according to the mark

hr{border:1px dashed #86BCD4; height:1;}

　　In the HTML code, there are also special levels of HR, which can be defined in style management to change its default display effect:

CSS definition of horizontal bar 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;

Horizontal bar Dashed effect definition

border:1px dashed #86BCD4; Height:1;