Style control of the CSS list

The list is a useful Display Method in HTML. You can arrange the related parallel content vertically to make the webpage clean and professional and give the viewer a clear view.

The list is a useful Display Method in HTML. You can arrange the related parallel content vertically to make the webpage clean and professional and give the viewer a clear view.

The style sheet adds some functions to the list. The style of the Control List includes the list style, graphical symbol, and list position.

1. List symbols

A list symbol is the symbol ID displayed before each list item.

The basic format is as follows:

List-style-type: Parameter

Value range:

· Disc: Circle

· Circle: hollow circle

· Square: Square

· Decimal: decimal number

· Lower-Roman: lowercase roman numerals

· Upper-Roman: upper-case roman numerals

· Lower-Alpha: lowercase Greek letter

· Upper-Alpha: uppercase Greek letters

· None: Unsigned display

The disc parameter is the default option.

2. graphical symbols

A graphical symbol indicates that the project symbol in the original list can be replaced by a graphic.

The basic format is as follows:

List-style-image: URL

A URL is the address of the graphic file used to replace the project symbol. You can use a relative address or an absolute address.

3. List location

List location description where the list is displayed.

The basic format is as follows:

List-style-position: Parameter

Value range:

· Inside: displayed inside the box model

· Outside: displayed outside the box model

Here, a new concept is introduced: the box model. Box is a container that contains objects that apply style rules.========================================================== ========================================================== ==========

Use unordered list: ul

Let's look at the simplest example:

 
<Ul>

<Li> Item 1 </LI>

<Li> Item 2 </LI>

<Li> Item 3 </LI>

<Li> Item 4 </LI>

</Ul>
 

 
This is an undecorated vertical list.
 

 
1: Set the boundary of the List
 

 
# Base {

Border: 1px solid #000;

Margin: 2em;

Width: 10em;

Padding: 5px;

}
 

 
In HTML, an unordered list with borders is displayed.
 

<DivID="Base">

<Ul>

<Li> Item 1 </Li>

<Li> Item 2 </Li>

<Li> Item 3 </Li>

<Li> Item 4 </Li>

</Ul>

</Div>
 

 
2: Set the list of images
 

 
You can set the style of the List to an image on the left. The style is as follows:
 

 
Ul {

List-style-type: disc;

List-style-image: url(bullet.gif );

List-style-position: inside;

}
 

 
Disc indicates the solid circle, and list-style-image indicates the small image used in the list. If the URL of this image is
 

 
If it is incorrect, disc will take effect. Inside indicates that the list is within the block.
 

 
3: How to use the list in a paragraph
 

 
The style 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 defines a block with a boundary of 1. horizontal navigation uses the inline method. Li. first defines the first block.
 

 
The list element does not have the border with 1 pixel on the left.
 

 
The following style is tab-based horizontal navigation:
 

# 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 the class of Li is here, it is selected