Div + CSS layout tutorial 5

Http://hi.baidu.com/tanainai/blog/item/601171a812e757b2cb130cc9.html

Http://www.cnblogs.com/onlyzq/archive/2007/12/17/1001443.html

 

 

In this section, I want to tell you how to use it well.BorderAndClearThese two attributes.

First, if you have used a table to create a web page, you should know how to create a dotted line in the table, you need to make a small image to fill it, in fact, we still have a simpler method, as long as you add such a paragraph in <TD> </TD>, you can try:
<Div style = "border-bottom: 1px dashed # CCC"> </div>

You can refer to the manual again to understand dashed, solid, dotted... you can use them to produce many effects, such as solid lines, dotted lines, dual lines, and shadow lines.

<Div id = "banner"> </div>

In the code above, you can see the bannerin the design sketch, and add the following style to css.css:

# Banner {
Background: url(banner.jpg) 0 30px no-Repeat;/* Add a background image */
Width: 730px;/* set the Layer Width */
Margin: auto;/* center layer */
Height: 240px;/* set the height */
Border-bottom: 5px solid # efefef;/* draw a light gray solid line */
Clear: Both/* clear floating */
}

By using border, it is easy to draw a solid line, and the image download space is reduced.NetworkResources to accelerate page loading.

Another note is clear: both, which indicates clearing all the float on the left and right. We will also use this attribute in the following layout: clear: left/right. Here, clear: Both is added because the previous UL and Li elements are set to float. If they are not cleared, the setting of the banner layer is affected.

<Div id = "pagebody"> <! -- Page subject -->
<Div id = "sidebar"> <! -- Sidebar -->
</Div>
<Div id = "mainbody"> <! -- Subject content -->
</Div>
</Div>

We add the following style to css.css:

# Pagebody {
Width: 730px;/* set the width */
Margin: 8px auto;/* center */
}
# Sidebar {
Width: 160px;/* set the width */
Text-align: Left;/* Left-aligned text */
Float: Left;/* floating left */
Clear: Left;/* float on the left is not allowed */
Overflow: hidden;/* Hide out of width */
}
# Mainbody {
Width: 570px;
Text-align: left;
Float: Right;/* float to the right */
Clear: Right;/* float on the right side is not allowed */
Overflow: hidden
}

To view the effect, we recommend that you add the following code to # sidebar and # mainbody. After previewing, you can delete this Code:

Border: 1px solid # e00;
Height: 200px

Save the preview effect and you can find that the two layers are perfectly floating, which meets our layout requirements, and the actual width of the two layers should be 160 + 2 (Border) + 570 + 2 = 734px, which has exceeded the width of the parent layer. Due to the clear, the two layers will not be misplaced, in this way, the layout of the page will not be misplaced because the content is too long (for example, slice.