Getting started with Div + CSS layout (4) -- Using border and clear

4. Page creation (1) ---- use border and clear
I was so sorry that I had been paying attention to my friends who had been paying attention to this site after so long before I began to write tutorials because I was looking for a job to find a house. Today is the second day after I found the house. So I will continue to write the tutorials.
In this section, I want to tell you how to use the border and clear 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, you can easily draw a solid line and reduce the network resources occupied by image downloads, making page loading faster.
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 */
}