Div + CSS Layout tutorial 5

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:

The code is as follows:	Copy code
<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.

The code is as follows:	Copy code
<Div id = "banner"> </div>

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

The code is as follows:	Copy code
# 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.

The code is as follows:	Copy code
<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:

The code is as follows:	Copy code
# 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 */ }