clear|css| Tutorials | Getting Started
four, page production (1)----with good border and clear
Because of looking for a job to find a house reason, after so long to begin to write a tutorial, I feel very sorry to have been concerned about the site's friends, today is the next day to find a house, so quickly continue to write tutorials.
In this section, the main thing is to tell you how to use the good border and clear these two properties.
First of all, if you've ever used a table to make a Web page, you should know that if you're going to draw a dotted line in a table, you need to make a small picture to fill it, but there's a simpler way to do that, as long as you're adding a paragraph to the <td></td>, You can try:
<div style= "border-bottom:1px dashed #ccc" ></div>
You can refer to the manual again, then you can understand dashed, solid, dotted ... And so on, using them you can make a lot of effects, solid lines, dashed lines, double lines, shadow line and so on.
<div id= "banner" ></div>
The code above can implement the banner in the design sketch and add the following style to the CSS.CSS:
#banner {
Background:url (banner.jpg) 0 30px no-repeat; * * Add background picture/
width:730px; /* Set the width of the layer * *
Margin:auto; /* Layer Center * *
height:240px; /* Set Height * *
border-bottom:5px solid #EFEFEF; * * Draw a light gray solid line * *
Clear:both/* Clear FLOAT * *
}
By border it is easy to draw a solid line, and reduce the image download the network resources used to make the page load faster.
Another thing to say is clear:both, which means clearing all the floats on the left and right, and we'll use this attribute in the next layout: Clear:left/right. Add Clear:both here is because before the UL, Li element set float, if not clear will affect the setting of banner layer position.
<div id= "pagebody" ><!--page Body-->
<div id= "sidebar" ><!--sidebar-->
</div>
<div id= "Mainbody" ><!--main content-->
</div>
</div>
Above is the main part of the page, we add the following style to the CSS.CSS:
#pagebody {
width:730px; /* Set Width * *
MARGIN:8PX Auto; /* Center *
}
#sidebar {
width:160px; /* Set Width * *
Text-align:left; /* Text Left alignment * *
Float:left; /* Floating Living Left/*
Clear:left; /* Do not allow floating on the left side * *
Overflow:hidden; /* Out of width part hidden * *
}
#mainbody {
width:570px;
Text-align:left;
Float:right; * * Floating habitat Right/*
Clear:right; /* Do not allow floating on the right side * *
Overflow:hidden
}
In order to be able to see the effect, it is recommended that you add the following code to #sidebar and #mainbody, and you can delete the code after the preview is complete:
border:1px solid #E00;
height:200px
By saving the preview effect, you can see that these two layers are perfectly floating, reaching the requirements of our layout, and the actual width of the two layers should be 160+2 (border) +570+2=734px, has exceeded the width of the parent layer, because of clear reason, these two layers will not appear dislocation, so that we can layout the page will not because the content is too long (such as pictures) and cause dislocation.
The Overflow:hidden added later can automatically hide portions of content that are too long, such as pictures. Usually we will see some pages in the load, because the picture is too large, resulting in the layout is stretched, until the page is finished downloading to restore normal, by adding overflow:hidden can solve this problem.
Each attribute in CSS can be used properly to solve many problems, perhaps they are not much related to the page you are layout, but you must know the role of these attributes, in the face of difficulties, you can try to use these properties to solve the problem.
The source file can be downloaded again in the next section.
