CSS Picture List

1.:

2.Example Source Code

<ul>
<li>
<a href= "http://www.52css.com/default.asp" >

<span> Ten-step record of CSS site layout </span>
</a>
</li>
<li>
<a href= "Http://www.52css.com/default.asp?cateID=3" >

Discussion on the semantic structure of form form in &LT;SPAN&GT;CSS Web page layout </span>
</a>
</li>
<li>
<a href= "Http://www.52css.com/default.asp?cateID=9" >

<span>52css Wardrobe A picture-based UL list </span></a>
</li>
<li>
<a href= "Http://www.52css.com/default.asp?cateID=5" >

<span> writing efficient CSS-talking about the rendering efficiency of CSS </span>
</a>
</li>
<li>
<a href= "Http://www.52css.com/default.asp?cateID=6" >

<span> cliché CSS page layout meaning and side effects </span>
</a>
</li>
<li>
<a href= "Http://www.52css.com/default.asp?cateID=7" >

<span>html the semantics and use location of tags in the page </span>
</a>
</li>
<div style= "Clear:both;" ></div>
</ul>

Here we begin to modify the CSS style definition, please note that when learning the following code, it is important to understand the definition of the relevant dimensions, the calculation and setting of the size in the CSS page layout coding.
It is also important to note that the Display:inline property is set in the Li's style definition to eliminate the IE6 double margin bug.

CSS Example Source Code:

Body,h3,ul {
margin:0;
padding:0;
}
h3 {
width:426px;
height:30px;
margin:20px Auto 0 auto;
font-size:14px;
text-indent:10px;
line-height:30px;
Background: #E4E1D3;
}
H3 a {
Color: #c00;
Text-decoration:none;
}
H3 A:hover {
Color: #000;
}
UL {
width:405px;
margin:0 Auto;
padding:10px 0 6px 15px;
BORDER:3PX solid #E4E1D3;
border-width:0 3px 3px 3px;
}
UL Li {
Float:left;
margin:5px 15px 3px 0;
List-style-type:none;
Display:inline;
}
UL Li a {
Display:block;
width:120px;
height:175px;
Text-decoration:none;
}
UL Li a img {
width:120px;
height:150px;
border:0;
}
UL Li a span {
Display:block;
width:120px;
height:23px;
line-height:20px;
font-size:12px;
Text-align:center;
Color: #333;
Cursor:hand;
White-space:nowrap;
Overflow:hidden;
}
UL Li A:hover span {
Color: #c00;
}

With CSS style settings, this CSS image list is changed. The six-row, one-column structure becomes a two-row, two-column structure. The margins between the elements are set appropriately and more aesthetically pleasing. Can adapt to the needs of website application.

CSS Picture List