Divcss layout example: a very practical CSS list

Create a "graphic and text mixed CSS list. First, analyze the features of this list, and then compile the htmlCodeAnd apply the CSS style to achieve the final effect.

At the top of the page is the topic name "No worries about templates" and the topic navigation "CSS cool site to enjoy the download of the divcss tutorial CSS template ". The topic name is represented by the title element HX, And the unordered list of UL Li can be used for the topic navigation.
The three link areas in the lower part are basically the same, the left side is the image link, and the right side isArticleList element. The picture and text on the left side are regarded as a paragraph, represented by the P tag, and the article list on the right side is represented by the unordered list of UL Li.

With the above analysis, start the following HTML encoding:

Example Source Code <Div id = "list_mb5u_com">
<Div class = "list_title"> </div>
<Div class = "list_unit" id = "l_showcase"> </div>
<Div class = "list_unit" id = "l_article"> </div>
<Div class = "list_unit" id = "l_templates"> </div>

</Div>

 

Place all elements in the layer with the ID list_mb5u_com to facilitate overall layout control. Create four layers: list_title, l_showcase, l_article, and l_templates. Apply the same class to the lower three content layers as list_unit.

The following describes how to write HTML code in depth:

<Div id = "list_mb">
<Div class = "list_title">
<H3> <a href = "" Title = "No worries about templates"> no worries about templates </a> <Ul>
<Li> <a href = "#" Title = "CSS Cool Site"> CSS cool site </a> </LI>
<Li> <a href = "#" Title = "divcss tutorial"> divcss tutorial </a> </LI>
<Li> <a href = "#" Title = "CSS template download"> download a CSS template </a> </LI>
</Ul>
</Div>
<Div class = "list_unit" id = "l_showcase">
<P>
<A href = "#"> </a>
<Span> <a href = "h #"> CSS cool site views </a> </span>
</P>
<Ul>
<Li> · <a href = "#"> the Highland Fling </a> </LI>
<Li> · <a href = "#"> we make merch we merge merch </a> </LI>
<Li> · <a href = "#"> kingsfield church ing with God each other and the world </a> </LI>
<Li> · <a href = "#"> adventure trekking in Nepal </a> </LI>
<Li> · <a href = "#"> Web Design Hamilton-vo studio </a> </LI>
<Li> · <a href = "#"> we have been doing Strategic Consulting digiwize </a> </LI>
<Li> · <a href = "#"> modern arboricultural services </a> </LI>
</Ul>
</Div>
<Div class = "list_unit" id = "l_article">
<P>
<A href = "http://www.mb5u.com/default.asp"> </a>
<Span> <a href = "#"> Div CSS tutorial </a> </span>
</P>
<Ul>
<Li> · <a href = "#"> CSS controls forced line breaks and forced line breaks of table cells </a> </LI>
<Li> · <a href = "#"> divcss instance: simulates the flash effect of CSS menus using images. </a> </LI>
<Li> · <a href = "#"> the divcss layout instance uses dl dt dd to create a list. </a> </LI>
<Li> · <a href = "#"> Method for embedding flash in compliance with web standards-js call </a> </LI>
<Li> · <a href = "#"> CSS experience: How to manage CSS styles? </A> </LI>
<Li> · <a href = "#"> Div CSS instance: Orange-blue CSS paging effect </a> </LI>
<Li> · <a href = "#"> Div CSS form layout and CSS form design skills </a> </LI>
</Ul>
</Div>
<Div class = "list_unit" id = "l_templates">
<P>
<A href = "http://www.mb5u.com/css_template/"> </a>
<Span> <a href = "http://www.mb5u.com/css_template/"> CSS template download </a> </span>
</P>
<Ul>
<Li> · <a href = "#"> download the CS template-Scuba holding </a> </LI>
<Li> · <a href = "#"> download the CS template-keeping it clean </a> </LI>
<Li> · <a href = "#"> download the CS template-culture shock </a> </LI>
<Li> · <a href = "#"> download the CS template-simply CSS </a> </LI>
<Li> · <a href = "#"> template download-doctors office </a> </LI>
<Li> · <a href = "#"> template download-mint chocolate chip </a> </LI>
<Li> · <a href = "#"> download the CS template-Andrea layout </a> </LI>
</Ul>
</Div>
<Div class = "clear"> </div>

</Div>

In the list_title layer, place the H3 element as the column name and create a UL list to place the column navigation.
In the lower part of the three content layers (list_unit), place the paragraph tag P, introduce the link image and text, and create a UL to place the article list.
At the bottom, place a layer with the class clear to clear the float.

With the above basics, start the following CSS encoding:

Example source code * {margin: 0; padding: 0; font-size: 13px; color: #000; List-style: none ;}
A {color: # 03c; text-Decoration: none ;}
A: hover {text-Decoration: underline ;}
# List_mb5u_com {width: 418px; margin: 30px auto; Border: 1px solid #999 ;}

Overall Layout statement:
Set the style of the entire layer. The width is 418px, the top and bottom margins are 30px, and the left and right sides are automatically aligned horizontally. Set the solid Gray Line of the border to 1px.

Example source code. list_title {width: 418px; Height: 32px; border-bottom: 1px solid #999; Background: # f2f9fd; overflow: hidden ;}
. List_title H3 {float: Left; width: 160px; line-Height: 32px; text-indent: 15px ;}
. List_title H3 A {color: # c00 ;}
. List_title H3 A: hover {color: # 03c ;}
. List_title ul {float: Right; width: 230px ;}
. List_title ul Li {float: Left; line-Height: 32px; padding: 0 5px ;}
. List_title ul Li a {font-size: 12px; color: #333 ;}

CSS style definition at the list_title layer in the title area:
Set the width and height of the list_title layer to 418px and 32px, the gray solid line with the lower border of 1px, and the background color and overflow hiding.
The column name H3 element floats to the left, the width is 160px, the line spacing is 32 px, and the text is vertically aligned. The text indent is 15px. Set the style of the column name H3 link.
The CSS style of the UL list in the navigation bar, floating to the right; the width is 230px; the list item Li is floating to the left; the line spacing is 32px; the top and bottom margins are 0, and the left and right margins are 5 PX; then set the link text size and color.

Example source code. list_unit {float: Left; width: 388px; margin-left: 15px; padding: 15px 0 8px 0; border-bottom: 1px dotted #9ac4e9 ;}
. List_unit {display: inline ;}

Overall style definition of the content layer (list_unit:
Float to the left. The width is 388px, the left margin is 15px, the top margin is 15px, and the bottom margin is 8px. The bottom border is set to a light blue dotted line.
Setting inline is to avoid the IE bilateral padding bug.

Example source code. list_unit P {float: Left; width: 164px ;}
. List_unit p a {display: block; Border: 1px solid # 03c ;}
. List_unit p a: hover {border: 1px dashed # 00f ;}
. List_unit p a IMG {width: 160px; Height: 120px; margin: 1px; Border: 0 ;}
. List_unit span {display: block ;}
. List_unit span a {display: block; width: 164px; Height: 22px; Border: 0; line-Height: 22px; text-align: center ;}
. List_unit span a: hover {border: 0; color: # c00 ;}

Definition of image link styles in the content layer (list_unit:
The entire section P, floating to the left, with a width of 164px.
Set the link to a block element, and set the border to 1 px blue solid line.
In the link suspense state, the border changes to a 1px dark blue dotted line.
The image definition in the Link element. The width and height are respectively 160px and 120px, the outer margin is 1px, and the border is 0 (remove the default border of the image link browser ).
Set the link text style. Because the above settings are complete, you should focus on Cascade the above content in the following content.
Converts a span to a block element. The link in the span is also converted into a block element. The width and height are 164px and 22px respectively, the border is set to 0 (stacked with previous settings), and the line spacing is set to 22px; align the text horizontally.
When the link text in the span is hovering over, set the border to 0, the color to # c00, And the underline.

Example source code. list_unit ul {float: Right; width: 216px; margin-top:-5px ;}
. List_unit ul Li {float: Left; width: 216px; line-Height: 22px; color: #039; white-space: nowrap; text-overflow: ellipsis; overflow: hidden ;}

Style definitions in the article list in the content layer (list_unit:
The entire list ul floats to the right, the width is 216px, and the top margin is-5px.
The CSS style settings of the list item Li, floating to the left, 216px in width, 22px in line spacing, #039 in color, and "intercept" in the following three attributes, mb5u.com. (Please note that this effect is invalid in ff)

Example source code # l_templates {border-width: 0 ;}
. Clear {clear: Both ;}

The final CSS settings:
The last content layer (list_unit) has no lower border, and the ID of this layer is l_templates. Therefore, you can define layers here to eliminate the borders of the layers.
It is required to clear the float; otherwise, confusion may occur under ff. This is a good coding practice.