UL Li CSS style (go)

UL Li CSS Style _ ruthless no thread _ Sina blog http://blog.sina.com.cn/s/blog_61352f210100eqeq.html

The list is a useful display in HTML, you can put the relevant side-by-side content neatly arranged vertically, so that the page looks neat and professional, and let the visitors have a sense of a glance.
Style sheets Add some functionality to the list, and the style of the control list includes list styles, graphic symbols, and three parts of the list position.
1. List symbols
A list symbol is a symbol identifier that is displayed at the current point in each list item.
The basic format is as follows:
List-style-type: Parameters
Parameter value range:
Disc: Round
Circle: Hollow Circle
Square: Block
Decimal: decimal digits
Lower-roman: Lowercase roman numerals
Upper-roman: Uppercase Roman Numerals
lower-alpha: Lowercase Greek alphabet
Upper-alpha: Uppercase Greek alphabet
None: Unsigned display
The disc in the parameter is the default option.

2. Graphic symbols
The graphic symbol refers to the original list of bullets that can be replaced with a graphic.
The basic format is as follows:
List-style-image:url
URLs are the addresses of graphic files used in place of bullets, and can use relative addresses or absolute addresses.
3. List location
The list location description list is displayed.
The basic format is as follows:
List-style-position: Parameters
Parameter value range:
inside: Display inside the box model
outside: Displayed outside the box model
Here comes a new concept: the box model. Box refers to a container that contains objects that apply style rules, which are given in the following article.
Use the unordered list: that is, UL
Look at one of the simplest examples:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
This is a non-decorated portrait list

1: Set the bounds of the list
#base {border:1px solid #000; margin:2em; width:10em; padding:5px;}
In HTML, it renders a bulleted list with a border
<div id= "Base" >
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>

2: Set list of images can set the style of the list to the left with an image,
The styles are as follows:
UL {list-style-type:disc; List-style-image:url (bullet.gif); list-style-position:inside;}
Disc represents a solid circle,
List-style-image represents the small image used in the list, if the URL of the image is incorrect, disc will work, inside indicates that the list is inside the block.

3: How to use the list style in a paragraph is as follows:
#inline-list {
border:1px solid #000; Margin:2em; width:80%; padding:5px; Font-family:verdana, Sans-serif;
}
#inline-list p {display:inline;}
#inline-list ul, #inline-list li {
Display:inline; margin:0; padding:0; Color: #339; Font-weight:bold;
}
4: Horizontal Navigation
#h-contain {
padding:5px; border:1px solid #000; margin-bottom:25px;
}
#pipe ul {
margin-left:0; padding-left:0; Display:inline;
}
#pipe ul Li {
margin-left:0; PADDING:3PX 15px; border-left:1px solid #000; List-style:none; Display:inline;
}
#pipe ul Li.first {
margin-left:0; Border-left:none; List-style:none; Display:inline;
}
#h-contain a block with a boundary of 1, and horizontal navigation uses the inline mode,
Li.first defines the first list element without the left-hand pixel, which is 1 border.

The following style is the horizontal navigation of the Tab method:
#tabs ul {
margin-left:0; padding-left:0; Display:inline;
}
#tabs ul Li {
margin-left:0; margin-bottom:0; padding:2px 15px 5px; border:1px solid #000; List-style:none; Display:inline;
}
#tabs ul Li.here {
border-bottom:1px solid #ffc; List-style:none; Display:inline;
}
If Li's class is here, it is selected.

UL Li CSS style (go)