General website will do click Logo, will return to the homepage, how to do it, we first thought, to the picture plus links on it
What do you do with the big exercises in the first four verses? There is no difficulty, if you feel that there is no relationship between the difficulty, this class, I take you to do this exercise!
"First step overall layout and public CSS definition"
Let's analyze this page first.
The page is mainly divided into 5 large chunks, the top of the logo, navigation bar nav, Banner, Content, Footer, as shown below
So it's easy to write HTML.
Because these 5 blocks are 900 pixels wide and are horizontally centered, the corresponding CSS code is as follows
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
* * Why write this code did not forget it, the role is to reset the possible use of the tag, do not understand to see the fourth section of the course keyword * *
#logo, #Nav, #Banner, #Content, #Footer {width:900px; margin:0 auto;}
"Second Step layout logo bar"
First we need to cut out the logo on the page, its size is 173*46, the name is: logo.gif
General website will do click Logo, will return to the homepage, how to do it, we first thought, to the picture plus links on it, the code will generally write
But Kwoojan to introduce another way, the picture is linked to a background, the same can achieve the above effect, and the HTML code will be more concise, less
HTML code:
CSS Code
#Logo {
There is no height defined in the height:80px;/* public code, defined here.
}
#logoLink {
display:block;/* the link a into a block element so that the background can be displayed.
width:173px;
height:46px;
Background:url (.. /images/logo.gif) No-repeat;
float:left;/* in order to let IE6 and FF display effect, if not add this sentence, the back of the margin-top:20px; Two browser resolution is not the same, we can remove this sentence, to see the difference between the two show effect * *
margin-top:20px;/* set A's top margin to 20 pixels, so you can have a distance from the top of the browser to do the same as in the picture.
}
Good to here, the head contains the logo of the area has been written, if they do not come out, the source code is as follows:
Floating (float) page layout (top) 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;
}
#logoLink {
Display:block;
width:173px;
height:46px;
Background:url (.. /images/logo.gif) No-repeat;
float:left;/* in order to let IE6 and FF display effect, if not add this sentence, the back of the margin-top:20px; Two browser resolution is not the same, we can remove this sentence, to see the difference between the two show effect * *
margin-top:20px;
}
"Third step layout navigation bar Nav"
The navigation bar on the page and fourth section is almost the same, and simpler, I will not give you step-by-step, will not do to see the fourth section, here I will send the code directly for everyone to learn
HTML code:
CSS Code
#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;/* This sentence must be added, otherwise in the IE6 will appear, this effect * *
}
#Nav ul Li A:hover{background: #68acd3;}
"Step fourth banner layout"
This is simpler, there are two ways
The first: the picture as
background
Second: Insert the picture directly between the
, Code:
We can choose which one to use according to the demand and the actual situation, here we use the first kind of
The HTML code doesn't change, just define it in CSS.
CSS Code:
#Banner {
height:290px;
Background:url (.. /images/banner.jpg) No-repeat;
}
Did you do it? Do not make a comparison with the following source code ~ ~
Floating (float) page layout (top) 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;
}
#logoLink {
Display:block;
width:173px;
height:46px;
Background:url (.. /images/logo.gif) No-repeat;
float:left;/* in order to let IE6 and FF display effect, if not add this sentence, the back of the margin-top:20px; Two browser resolution is not the same, we can remove this sentence, to see the difference between the two show effect * *
margin-top:20px;
}
/* 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;}
/*banner*/
#Banner {
height:290px;
Background:url (.. /images/banner.jpg) No-repeat;
}
How to make it easier here, okay, then.
"The Fifth Step Content section layout"
From the picture we see that the content plate is divided into about two areas, the left contentl width is 600px, the right contentr width is 300px, but because we want to set the inner margin to 15px (this will look good), So the width of the contentl in CSS will be set to 600-15*2=570px, while the right side of the contentr need to be set to 300-15*2=270px;
HTML code:
here for left contentl
here for left contentr
CSS Code:
#Content #ContentL, #Content #ContentR {float:left; padding:15px} * * Why all want to float on the left, if you do not understand to see the second section * *
#Content #ContentL {width:570px; background: #f0f0f0;}
#Content #ContentR {width:270px; background: #d3e7f2;}
Page effect:
The content part we do first here, finally we then layout inside the concrete element, below next to layout Copyright module (Footer)
"Step sixth footer Layout"
This part of the structure is relatively simple, we just need to know how to layout on the OK
HTML code:
<P>CSS Study alixixi.com finishing
<P>CSS Study alixixi.com finishing
CSS Code:
#Footer {
Text-align:center;
Background: #68acd3;
padding:10px 0;
font-size:12px;
Font-family:arial, Helvetica, Sans-serif;
Color: #fff;
line-height:20px;
}
The effect is as follows:
The full code for this section here is as follows:
<TITLE>CSS Study alixixi.com finishing
here for left contentl
here for left contentr
<P>CSS Learning alixixi.com Finishing has
<P>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;
}
#logoLink {
Display:block;
width:173px;
height:46px;
Background:url (.. /images/logo.gif) No-repeat;
float:left;/* in order to let IE6 and FF display effect, if not add this sentence, the back of the margin-top:20px; Two browser resolution is not the same, we can remove this sentence, to see the difference between the two show effect * *
margin-top:20px;
}
/* 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;}
/*banner*/
#Banner {
height:290px;
Background:url (.. /images/banner.jpg) No-repeat;
}
/*content*/
#Content #ContentL, #Content #ContentR {float:left; padding:15px} * * Why all want to float on the left, if you do not understand to see the second section * *
#Content #ContentL {width:570px; background: #f0f0f0;}
#Content #ContentR {width:270px; background: #d3e7f2;}
/*footer*/
#Footer {
Text-align:center;
Background: #68acd3;
padding:10px 0;
font-size:12px;
Font-family:arial, Helvetica, Sans-serif;
Color: #fff;
line-height:20px;
}
This article comes from www.cssxuexi.cn * Respect others Labor achievements, reprint please consciously indicate the source!
