2 Days to harness div+css! Lesson Five (Part I)

Source: Internet
Author: User
Tags add define return xmlns
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!



Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.