Let's take a look at the css div webpage layout as shown in the figure below. The analysis is composed of a large layer consisting of multiple li tags,
The following figure shows the div layout of the above figure.
<Div id = "face">
<Div id = "facetitle">
<Span> avatar list </span>
<Input id = "faceclose" type = "submit" value = ""/>
</Div>
<Ul id = "faceul">
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
<Li> <a href = "#"> </img> </a> </li>
</Ul>
</Div>
The style is very concise, and div ul li is used to complete such a beautiful and regular webpage image layout. Let's see how css is written.
# Face {
Width: 300px;
Border: 1px solid # b4b4b4;
Height: 280px;
Margin: 0 0 0 50px;
Background: # ffffff;
}
# Face input {
Background: url (images/faceclose.gif) no-repeat center;
Margin: 0 0 0 140px;
Float: left;
Border: none;
Cursor: pointer;
Width: 30px;
Height: 30px;
}
# Facetitle {
Font-weight: bold;
Height: 30px;
Width: 292px;
Margin: 3px 0 0 3px;
Background: url (images/faceback.gif) repeat-x top left;
}
# Facetitle span {
Float: left;
Color: # ffffff;
Display: block;
Height: 30px;
Line-height: 30px;
Width: 100px;
Margin: 0 0 0 10px;
}
# Faceul {
Margin: 0 0 0 2px;
Width: 290px;
}
# Faceul li {
Float: left;
Border: 1px solid # b4b4b4;
Margin: 5px 0 0 4px;
Height: 52px;
Width: 50px;
}
# Faceul li {
Display: block;
Height: 52px;
Width: 50px;
}
# Faceul img {
Margin: 5px 0 0 5px;
Border: none;
Height: 40px;
Width: 40px;
}
We have defined face and then defined its sub-classes, such as li, a, and img ul.
Final statement: please indicate www.111cn.net/cssdiv/css.html