We often go into a misunderstanding, will think that in the Web2.0 era, as long as the page is no technical content, is a disgrace, if the page does not have a table, all elements of the div to do, that is the cow! Everyone, if someone says to you that my entire site doesn't apply a table, then you can think that this person does not have any technical content on the page
We went on to last class, continue to study, I put the overall effect of the page issued to facilitate everyone to learn
"Seventh Step Left section (CONTENTL) layout"
We analyze his structure, mainly including two pieces of title and article content, and there is a dotted line between the title and the content, and the second part of the article is a picture and text combined with text around the picture.
Good ~!. Now that we've got the structure, it's easier for us to lay back.
I'm going to use the
label for the title, why so use it for the following reasons
The first:
label itself is bold so that the CSS does not have to define the font weight
Second: If the title with
, the search engine will first crawl the contents of
, and then extract keywords, so that others in the search engine input keywords, it will be easier to find your site yo ~ then the flow of the swish drop ~ ^_^
For the content of the article, we put it in the
OK, the corresponding code is as follows:
HTML code:
Welcome to <H1>CSS Learning Interactive community!
We are a group of enthusiastic friends who love the front page technology and are keen to promote the standard of the Web, if you want to learn or are learning div+css layout page, join us! You will soon tame and harness this boisterous! Although our forum is starting, but everyone here loves the page front-end technology and is keen to promote the use of the standards in China, as long as you have questions you can ask, someone will help you answer! We may not be a master, but we are all very helpful and ready to delve into. We are all very enthusiastic!
CSS Code:
#Content #ContentL h1{
height:40px;
line-height:40px;/* sets the line spacing to ensure that the text in the H1 is centered vertically.
font-size:16px;
Color: #054d73;
border-bottom:1px #969696 dashed;/* Set the bottom border of H1 to be a dotted line with a width of 1 pixels * *
margin-bottom:10px;/* sets the outer margin so that the H1 and the following content area p remain 10 pixels away.
}
#Content #ContentL p{
font-size:12px;
line-height:20px;
text-indent:2em;/* The purpose of this sentence is to make the first line of the article indent two characters, remember this sentence is OK * *
}
The effect is as follows:
The source code is as follows:
Untitled Document
Welcome to <H1>CSS Learning Interactive community!
We are a group of enthusiastic friends who love the front page technology and are keen to promote the standard of the Web, if you want to learn or are learning div+css layout page, join us! You will soon tame and harness this boisterous! Although our forum is starting, but everyone here loves the page front-end technology and is keen to promote the use of the standards in China, as long as you have questions you can ask, someone will help you answer! We may not be a master, but we are all very helpful and ready to delve into. We are all very enthusiastic!
here for left contentr
<P>CSS Study alixixi.com finishing
<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 #ContentL h1{
height:40px;
line-height:40px;/* sets the line spacing to ensure that the text in the H1 is centered vertically.
font-size:16px;
Color: #054d73;
border-bottom:1px #969696 dashed;/* Set the bottom border of H1 to be a dotted line with a width of 1 pixels * *
margin-bottom:10px;/* sets the outer margin so that the H1 and the following content area p remain 10 pixels away.
}
#Content #ContentL p{
font-size:12px;
line-height:20px;
Text-indent:2em;
}
#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;
}
Our first article has been laid out here, the following layout of the second article, it is estimated that we have already noticed that the only difference between the two articles is the second article of the content of the left side of a picture, haha, this is good to do, the first article of the code copied over, replace the title and article content, Then insert a picture in the article content OK, the code is as follows:
HTML code:
with Kwoojan learning div+css only 2 days
Group of many friends in just contact with the div+css, very confused, do not know where to learn from, see the online tutorial, the theory of things too much, the more read more confused, said time also does not allow, there is no patience, In fact, Kwoojan also do not like to see this video tutorial, very boring, very boring, even if the patience to see the harvest is not small, practical, some friends on the group told me, they learn div+css no idea, do not know how to learn, how to learn, hope Kwoojan can take them step-by-step walk, From today I will write a tutorial, intends to take the example mainly, the master everybody more relaxed control div+css. Well, here I have to give everyone to correct a mistake, we usually say that the div+css is actually a kind of wrong, is the Chinese invented, not accurate, can not be called the page layout thought is very precise, in fact, should say xhtml+css just right.
But if we preview the effect, it's like this.
Not only the picture does not depend on the left, and the text above there is a large blank, how should do? It's easy, as long as we float to the left of the picture (Float:left;), CSS code is as follows
#Content #ContentL P img{
Float:left;
}
The effect is as follows, very close to it, but the left side of the picture and the text is too close to the
This is a good solution, set the right margin of the picture (Margin-right) ~,css code is as follows:
#Content #ContentL P img{
Float:left;
margin-right:10px;
}
It's the same effect, ~!. ~! ~!
Ok! Here Contentl plate layout is done!
"Eighth Step content right plate (CONTENTR) Layout"
With the Contentl plate layout experience, the right side will be very easy, title "Join Us!" "Of course it's
tags, good ~!. Start!
The title area code is as follows
HTML code:
Join us!
CSS Code:
#Content #ContentR h1{
height:40px;
line-height:40px;/* sets the line spacing to ensure that the text in the H1 is centered vertically.
font-size:16px;
Color: #900;
border-bottom:1px #969696 dashed;/* Set the bottom border of H1 to be a dotted line with a width of 1 pixels * *
margin-bottom:10px;/* sets the outer margin so that the H1 and the following content area p remain 10 pixels away.
}
And the content of the first sentence of "CSS Learning Interactive Community QQ Group:" The code is as follows
HTML code:
<STRONG>CSS Learning Interactive Community QQ Group:
CSS Code:
#Content #ContentR strong{
display:block;/* only the strong label, converted into a block element, margin-bottom:5px, will work to make
with the following elements to maintain a certain distance.
font-size:12px;
Color: #333;
margin-bottom:5px;
}
Good ~!. The first line is done!
The following two lines of Red QQ group information how to do? Actually, there are many ways to do this.
Method One: UL, Li or DL, DT, DD to layout
Method two: Table (table) to layout
Method Three: With simple label to layout such as , ,
and other labels
In fact, I recommend the second method, perhaps you can see here is very think, or feel embarrassed to use a table, as if there is no technical content, in fact, if you do not use table, but think your technical content is low, oneself give oneself trouble, why so say?
First you have to know that Div and table are not meant to be born,The birth of Div is used to layout the page, and the birth of the table is to put the data, we see Kwoojan All write code, only the layout of the page when the big plate, remember the last lesson when the layout of the page section of the code?
The entire page on these 5 div, other places generally do not, because Div's mission is the layout page!
We often go into a misunderstanding, will think that in the Web2.0 era, as long as the page is no technical content, is a disgrace, if the page does not have a table, all elements of the div to do, that is the cow! Attention, everybody. If someone said to you, my entire website does not apply a table, this time you can think that this person does not have any technical content of the page, and the CSS code is quite complex, can not be regarded as a master, at most is a DIV fanatic, the page can be said to be the standard, A lot of table can be simple to achieve the effect, you have to use DIV to achieve, not only make the CSS file is quite bloated, but also make the page loading speed slow.
So here Kwoojan remind everybody, must certainly go out this erroneous zone!
Okay, so much for that, the code for this piece is as follows:
HTML code:
<TD width= "36%" height= ">1":5505810 Group<TD width= "64%" >2 Group:87951377
<TD height= ">3 Group":73513641
| 4 Group:72263578 |
CSS Code:
#Content #ContentR table{
font-size:12px;
Color: #900;
}
The last sentence is simpler, the code is as follows
HTML code:
hope to have a strong enterprising spirit and mutual help spirit of friends please join! A piece of discussion to learn a piece of communication!
CSS Code:
#Content #ContentR span{
font-size:12px;
}
At this point each of our plates are finished, but there are two flaws:
1 IE6 and FF has a point is not the same, the bottom of the copyright in FF but ran to the right side of the contentr below, as shown:
causes:is because the ID is content div, not automatically adapt to the height of the inside contentl
Workaround:The easiest way is to set content CSS properties Overflow:hidden;
How to solve the problem?
2 because the height of the contentr is not contentl high, so there is a blank below contentr, as shown in the figure:
WORKAROUND: Simply set the background color of the content to be the same as the contentr background color.
The problem is solved.
Final effect
At this point, the entire page is complete layout, how does it feel? If you don't understand, reply to the Post and tell me.
By the way: The final code can actually be streamlined, this is to give everyone a study questions
next lesson, we're going to talk about the second way to layout Web pages---positioning
The final code for this lesson:
Untitled Document
Welcome to <H1>CSS Learning Interactive community!
We are a group of enthusiastic friends who love the front page technology and are keen to promote the standard of the Web, if you want to learn or are learning div+css layout page, join us! You will soon tame and harness this boisterous! Although our forum is starting, but everyone here loves the page front-end technology and is keen to promote the use of the standards in China, as long as you have questions you can ask, someone will help you answer! We may not be a master, but we are all very helpful and ready to delve into. We are all very enthusiastic!
with Kwoojan learning div+css only 2 days
Group of many friends in just contact with Div+css, very confused, do not know where to learn from, see the online tutorial, the theory of things too much, the more read more confused, and also not allowed in time, There is no patience, in fact, Kwoojan also do not like to see this video tutorial, very boring, very boring, even if the patience of the harvest is not very small, practical, some friends on the group told me that they learn div+css no idea, do not know how to learn, how to learn, Hope Kwoojan can take them step by step, starting from today I will write a tutorial, intends to take the example mainly, master everyone more easily control div+css. Well, here I have to give everyone to correct a mistake, we usually say that the div+css is actually a kind of wrong, is the Chinese invented, not accurate, can not be called the page layout thought is very precise, in fact, should say xhtml+css just right.
Join us!
<STRONG>CSS Learning Interactive Community QQ Group:
<TD width= "36%" height= ">1":5505810 Group<TD width= "64%" >2 Group:87951377
<TD height= ">3 Group":73513641
| 4 Group:72263578 |
hope to have a strong enterprising spirit and mutual help spirit of friends please join! A piece of discussion to learn a piece of communication!
<P>CSS Study alixixi.com finishing
<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,strong{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 {overflow:hidden; background: #d3e7f2;}
#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 #ContentL h1{
height:40px;
line-height:40px;/* sets the line spacing to ensure that the text in the H1 is centered vertically.
font-size:16px;
Color: #054d73;
border-bottom:1px #969696 dashed;/* Set the bottom border of H1 to be a dotted line with a width of 1 pixels * *
margin-bottom:10px;/* sets the outer margin so that the H1 and the following content area p remain 10 pixels away.
}
#Content #ContentL p{
font-size:12px;
line-height:20px;
Text-indent:2em;
}
#Content #ContentL P img{
Float:left;
margin-right:10px;
}
#Content #ContentR {width:270px; background: #d3e7f2;}
#Content #ContentR h1{
height:40px;
line-height:40px;/* sets the line spacing to ensure that the text in the H1 is centered vertically.
font-size:16px;
Color: #900;
border-bottom:1px #969696 dashed;/* Set the bottom border of H1 to be a dotted line with a width of 1 pixels * *
margin-bottom:10px;/* sets the outer margin so that the H1 and the following content area p remain 10 pixels away.
}
#Content #ContentR strong{
display:block;/* only the strong label, converted into a block element, margin-bottom:5px, will work to make with the following elements to maintain a certain distance.
font-size:12px;
Color: #333;
margin-bottom:5px;
}
#Content #ContentR table{
font-size:12px;
Color: #900;
}
#Content #ContentR span{
font-size:12px;
}
/*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!
