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

In fact, the theory is the same, as long as you can understand and learn the content of this lesson, then the difficult navigation bar you can be very responsive, easy!!!

Course Start:
For the first lessons, we learned what is "content block elements and inline elements", as well as the core concept of xhtml+css layout "box model", while learning a page layout in one of two methods of "floating", this time we use these three concepts, to create a classic navigation bar, Although it is not handsome, but on the internet all the navigation bar can be modified on the basis of it and come yo ~, tough bar ~! In fact, the theory is the same, as long as you can understand and learn the content of this lesson, then the difficult navigation bar you can be very responsive, easy!!!
Ok! The effect of the navigation bar we want to do is as follows:
The mouse moves up and the background turns black, and the font color turns white

In fact, do this navigation is very easy, you only need to move the mouse knocking on the keyboard, followed by Kwoojan do is, hehe
"First step" we have to do a container first (requirements: ID for "NAV", width of 960px, height is: 35px, located in the middle of the page level, and the browser at the top of the distance is 30px;), this container is to put our navigation yo ~ code as follows:
HTML code:
<div id= "NAV" ></div>

CSS Code:
#nav {
width:960px;
height:35px;
Background: #CCC/* To facilitate viewing area range size, so add a background color * *
margin:0 auto;/* Horizontal Center *
Top 30px*/of margin-top:30px;/*
}
There is also a need to remind that, in order to page compatibility in the browser, do not forget to add tags at the top of the CSS file to reset the code yo ~
Code:
body,div{padding:0; margin:0;}
Here is not much to say, do not understand it, the course at the top of the course keywords
How, to make no, the effect is not a gray bar, is located in the middle of the page, and all browsers effect the same ~ hehe
(If you haven't made it to prove that you didn't look at the tutorial carefully, you won't learn it well in this attitude, I put the whole xhtml+css theory into the tutorial, or the tutorial "knowledge point concentration" is very high, sometimes you need a word not to leak to the product I said, do not Islands to see yo ~ As long as you take the tutorials I've written for word of the day, Kwoojan guarantee that you will be easy to make a page of the compatibility of various browsers, and the code is absolutely streamlined! CSS file loading speed greatly improved Yo ~)

"Step Two"
When the box is done, we're going to put the contents of the navigation bar inside the "CSS Learning Prep Tutorial to improve the tutorial layout and the wonderful application", if we take this content (currently 6), as a wine cup, if you put it directly into the box, it will be chaos, and will be staggered, a little order is not, But we usually use a partition to separate each wine cup, so that the wine Cup is very orderly into the box, and won't and shockproof, easy to use! Now we call this clapboard "ordered list", which is called the English name: UL, inside each cell we also give an English name "Li", we think of the inside of this UL is not the same as the box inside the space as large, small, the glass is still unstable, big will not put in, So we define the time of the UL size must also and outside the box big yo ~, so, our code will know how to write it

HTML code
<div id= "NAV" >
<ul>
<LI>CSS Learning </li>
<li> Pre-school preparation </li>
<li> Getting Started tutorial </li>
<li> Improve Tutorials </li>
<li> Layout Tutorial </li>
<li> Wonderful Applications </li>
</ul>
</div>

CSS code:
#nav ul{
width:960px;
height:35px;
}

The effect is made no, the following is displayed in IE6 and FF (other browser effects everyone test, summary rule):

The effect is not the same, it does not matter, IE6 box was propped up, FF but not, but our "Wine Cup" has come out, and we do not want our glass vertical arrangement, but horizontal arrangement, how to do? Give us a minute to think ~ ~ ~
Have you figured it out yet? What didn't?
It doesn't matter, I take you think, because <li> tag is also a block element, so he also has a block element of "overbearing", do not allow other elements and themselves in the same line, a total of six <li> so the six of them are lined up like stairs, and I hint here, People should know what to do to get these "wine glasses" lined up horizontally! ^_^
Yes, with a floating float!. But let who float, of course, is <li> tag ~ code as follows:
#nav ul li{Float:left;}
is the effect the same as the following?

You will find that although the "goblet" is arranged horizontally, the effects in IE6 and FF are still different.
1) box (#nav) height is not the same
2 in the FF "Wine Cup" front has a big black dot, but IE6 not!
solving the above two problems is also very easy, as follows
1 do this label UL and Li have to reset? As long as we write a new label on the page, we will reset it, by adding the UL, Li tags to the reset code "Body,div,Ul,li{padding:0; margin:0;} "
2 "Wine glass" front of the big black dot, is the FF to the LI tag definition of the default style, we just need to be Li's default style removed is, in the Li tag CSS attribute to add "list-style:none;" It's OK.
Now look at the two browsers display the effect is the same as the following Picture it ~

If you do this here and I said the effect is not the same, it does not matter, I have to do the current second step of the code out, you say to the above to see again, can definitely learn, the code is as follows:
HTML code: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Navigation Production </title>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>

<body>
<div id= "NAV" >
<ul>
&LT;LI&GT;CSS Learning </li>
<li> Pre-school preparation </li>
<li> Getting Started tutorial </li>
<li> Improve Tutorials </li>
<li> Layout Tutorial </li>
<li> Wonderful Applications </li>
</ul>
</div>
</body>
CSS code:
/* CSS Document * *
body,div,ul,li{padding:0; margin:0;}
#nav {
width:960px;
height:35px;
Background: #CCC;
margin:0 auto;/* Horizontal Center *
Top 30px*/of margin-top:30px;/*
}
#nav ul{
width:960px;
height:35px;
}
#nav ul li{
Float:left;
List-style:none;
}
"Step Three"
The second step of the effect is not what we want, all the "glass" has not kept the "car distance", the following text all affixed to the previous text.
Good ~!. We're going to split them now! The setting <li> label width is 100 pixels:
CSS Code:
#nav ul li{
width:100px;
Float:left;
List-style:none;
}
For ease of observation, we will set the background of <li> label Red(Setting the background color is an important method in page layout to see the block Element area range)
CSS Code:
#nav ul li{
width:100px;
Float:left;
List-style:none;
background: #900;
}
The effect is as follows:

Look, find the problem, our <li> label height is not the same height as our box, this is why in the layout of the page, often set the background color, that is the truth, otherwise, you can not send a hidden problem, But often these hidden problems will lead to the compatibility of the page browser greatly reduced yo ~
Now temporarily do not remove the background color of <li> label, when we adjust it to the effect we need to remove!
To continue, we set the height of Li to the height of the box 35 pixels, the code to write themselves, how, the height of the bar, but the text is located at the top, how to set it to the center, and set line spacing,Add the following code to the <li> CSS code:
line-height:35px;
is the effect the same as the image below?

Good vertical Center solution, turn to the horizontal center, this is easy, directly in the <li> CSS code to add the following sentence code:
Text-align:center;
How, the effect of a little meaning it ~ here I send another code, to ensure that everyone learn each step! The code is as follows:
HTML code: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Navigation Production </title>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>

<body>
<div id= "NAV" >
<ul>
&LT;LI&GT;CSS Learning </li>
<li> Pre-school preparation </li>
<li> Getting Started tutorial </li>
<li> Improve Tutorials </li>
<li> Layout Tutorial </li>
<li> Wonderful Applications </li>
</ul>
</div>
</body>
CSS code:
/* CSS Document * *
body,div,ul,li{padding:0; margin:0;}
#nav {
width:960px;
height:35px;
Background: #CCC;
margin:0 auto;/* Horizontal Center *
Top 30px*/of margin-top:30px;/*
}
#nav ul{
width:960px;
height:35px;
}
#nav ul li{
width:100px;
height:35px;
Float:left;
List-style:none;
Background: #900;
line-height:35px;
Text-align:center;
}
Good ~!. Do here, have you ever thought of a problem, because our <li> tag is set to a width of 100 pixels, has limited its width, if the text is more than it will not automatically scalable adaptive, then we need to remove its width, this time <li> The width will be narrowed to the width of the text, in other words, if we add some text (to change our glasses to a big one), this <li> will also be larger, we remove the width after the test, is not this appearance, so that our navigation bar is more flexible, not to the "Wine Cup" The size of some scruples! The code at this point:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Navigation </title>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>

<body>
<div id= "NAV" >
<ul>
&LT;LI&GT;CSS Learning </li>
<li> Pre-school preparation </li>
<li> Getting Started tutorial </li>
<li> Improve Tutorials </li>
<li> Layout Tutorial </li>
<li> Wonderful Applications </li>
</ul>
</div>
</body>
/* CSS Document * *
body,div,ul,li{padding:0; margin:0;}
#nav {
width:960px;
height:35px;
Background: #CCC;
margin:0 auto;/* Horizontal Center *
Top 30px*/of margin-top:30px;/*
}
#nav ul{
width:960px;
height:35px;
}
#nav ul li{
height:35px;
Float:left;
List-style:none;
Background: #900;
line-height:35px;
Text-align:center;
}
Although this width has been adaptively solved, but to the text of the space is too little, visually uncomfortable, then we will help it expand the space, but also to ensure that the width of the adaptive, the solution is very easy, plus the left and right inside the margin on OK, here set the margin of 10px, in the <li> tag plus the following code , by the way, remove the background color
padding:0 10px;
Is that the effect?

Whether your "cup" is enlarged or reduced,<li> not only the width will increase, but the distance between the Cup and the Cup will never change! What's the point, ~!?

Do this at this time the source code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Navigation </title>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>

<body>
<div id= "NAV" >
<ul>
&LT;LI&GT;CSS Learning </li>
<li> Pre-school preparation </li>
<li> Getting Started tutorial downloads </li>
<li> Improve Tutorials </li>
<li> Layout Basics Tutorial </li>
<li> Wonderful Applications </li>
</ul>
</div>
</body>
/* CSS Document * *
body,div,ul,li{padding:0; margin:0;}
#nav {
width:960px;
height:35px;
Background: #CCC;
margin:0 auto;/* Horizontal Center *
Top 30px*/of margin-top:30px;/*
}
#nav ul{
width:960px;
height:35px;
}
#nav ul li{
height:35px;
Float:left;
List-style:none;
line-height:35px;
Text-align:center;
padding:0 10px;
}



This article comes from www.cssxuexi.cn * Respect others Labor achievements, reprint please consciously indicate the source!