Usually we are in the layout page, or to float mainly, position supplemented! So you can make high-quality pages.
Let's take out the last lesson in a word.
“If you use position to lay out the page, the position attribute of the parent element must be relative, and the element positioned somewhere within the parent is best used absolute because it is not affected by the properties of the padding of the parent element. Of course, you can also use position, but when the time to calculate do not forget the value of padding. ”
If you still do not understand this sentence, we will do an example, our 5th section of the Head blog area with positioning (position) to layout the
The HTML code is no different from the original:
CSS code changes, let's take a look at the original CSS code
#Logo {
height:80px;
}
#logoLink {
Display:block;
width:173px;
height:46px;
Background:url (.. /images/logo.gif) No-repeat;
Float:left;
margin-top:20px;
}
Originally used "Floating + outside Distance" layout, the #logolink positioning in the distance from the top 20 pixels, the left 0 pixels of the place;
If you use position method, CSS should be so written, first to #logo add "position:relative;" to #logolink plus "position:absolute;" and then let the #logolink distance above 20 pixels, 0 pixels to the left, the specific code is as follows:
#Logo {
height:80px;
position:relative;/* Relative Positioning * *
}
#logoLink {
Display:block;
width:173px;
height:46px;
Background:url (.. /images/logo.gif) No-repeat;
Position:absolute;
top:20px;
left:0;
}
How the effect is the same as the original, it is so simple.
What the? More CSS code? Indeed, from the original two words, into the present four sentences, but there is no discovery, rely on position we can be free to locate the logo at any one place! That's where it's flexible! If you have a line at the top of the page, "Add Favorites Home RSS feed" to the following figure, you can also conveniently position them in the upper right corner.
But positioning (position) has a disadvantage, will not adapt to the internal element of the height, so usually we in the layout of the page, if a certain or some of the module height will never change, you can use positioning, but Kwoojan suggested that when the layout of the page, or to float mainly, Position Supplement! So you can make high-quality pages.
=========================================================================
Finally, please remember me this sentence: " layout page, float mainly, position supplemented!" "
=========================================================================
Well, our tutorial on page layout is finished.
If you can get a thorough understanding of each lesson, you can now clap your breasts and say "
I'm a DIV+CSS master! "Haha, but you know, Div+css's name is not standard, should be called ...
What, you can't remember?!
Bam ~~
The source code of this lesson:
CSS Study alixixi.com finishing
/* Public Part * *
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
#Logo, #Nav, #Banner, #Content, #Footer {width:900px; margin:0 auto;}
/* Head logo area * *
#Logo {
height:80px;
position:relative;/* Relative Positioning * *
}
#logoLink {
Display:block;
width:173px;
height:46px;
Background:url (.. /images/logo.gif) No-repeat;
Position:absolute;
top:20px;
left:0;
}
/* Navigation Bar * *
#Nav {height:42px;}
#Nav ul{
height:42px;
List-style:none;
Background: #56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul Li a{
display:block;/* into a block element, because the link is an internal chain element, if you want to define the following attributes, it must be converted into a block element, * *
height:42px;
Color: #FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
Font-weight:bold;
font-family:arial;
text-decoration:none;/* to remove the link style, the default is underlined, plus this sentence there is no style, the underline is not a * *
Float:left;
}
#Nav ul Li A:hover{background: #68acd3;}
This article comes from www.cssxuexi.cn * Respect others Labor achievements, reprint please consciously indicate the source!
