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 approach, as longAnd you can try:
Example Source Code
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.
Show Hidden content
In the code above, you can see the bannerin the design sketch, and add the following style to css.css:
Example Source 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.
Example Source Code
We add the following style to css.css:
Example Source 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 */
}
# 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:
Example Source Codeborder: 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.
The overflow: hidden added later can automatically hide the portion of the content that is too long (sample. Usually we can see that when loading some webpages, the layout is opened because the images are too large, and the page is restored until the download is complete. This problem can be solved by adding overflow: hidden.
Every attribute in CSS can be used properly to solve many problems. Maybe they have little to do with your layout pages, but you must know the role of these attributes, when you encounter a problem, you can use these attributes to solve the problem.
