The idea of the lesson four is this, if thoroughly thorough this class, then what kind of navigation is very easy to make out, if you and JS very good combination of use ~ You can be very confident to the boss to raise a salary!!! ^_^
Last lesson we made the navigation bar the following effect
"Step Fourth"
We need to make the following changes to the navigation bar above
1) to the above navigation plus links;
2 Link text size modified to 12px;
3) and specify the link style, the mouse to move up and take away the effect
The modification method is as follows
1 navigation plus links, HTML code is as follows:
2 text size 12 pixels, CSS code as follows
a{font-size:12px;}
3 mouse movement above and take off the effect
#nav ul Li A{color: #333; text-decoration:none;}
#nav ul Li A:hover{color: #fff; text-decoration:underline;}
The effect is not the same as the following, the mouse moved up into a white underlined link
Here, basically a navigation bar came out ~ but in order to allow everyone to raise a level, Kwoojan to help everyone on the above navigation bar for a change, is a trigger!
I want the mouse to move up after the background of the link turns black, below is my step
First, add a background to link A to make it easy to see the area of link a
#nav ul Li A{color: #333; text-decoration:none;
background: #0FF;}
What do you know about the area of a?
Now I'm going to set a height of 35px to the same height as the box so that I can completely cover the gray of the box below with the bright blue background.
So I insert the following red code:
#nav ul Li a{
height:35px;Color: #333; Text-decoration:none; Background: #0FF;}
But no matter how I refresh the browser, the height has not changed any, this is why?!
The reason is that a is an inline element, the inline element is unable to set the width and height, width and heights are only for block elements, said here, the solution came out, as long as we put inline element A into a block element can be, we use "display:block;" Converts the inline element into a block element. Let's not add this code, just close your eyes and think about what the interface will look like.
#nav ul Li a{
Display:block;height:35px; Color: #333; Text-decoration:none; Background: #0FF;}
Actual effect:
IE6 and FF display effect incredibly different, IE6 why all the links in the vertical arrangement? In fact, this is also very simple, ie think a since the conversion into a block element, there is a block element of the characteristics---overbearing, it is not allowed to other elements and its same line, plus also did not have the width of a set, so that is caused by IE6 in this way, but FF why not so, as we imagine, That is because Firefox thinks a even as a block element, it should be affected by the outside
elements, so the reality, who is the standard, because we all think FF is a standard browser, so we can use FF as the standard, but Kwoojan think, do not care who standards are not standard, That is relative, I think the IE standard, FF is not standard, I do not want to waste energy on this issue, I prefer to use the energy in thinking about how to improve the browser compatibility page!
See here I think you should know how to make the page appear in the IE6 as in FF, very simple, just add "Float:left" to the CSS code of a.
#nav ul li A{display:block; height:35px color: #333; text-decoration:none; background: #0FF;Float:left;}
Problem solved, this is still used to the previous sections of the course content, if you can not think how to solve, explain the previous class, especially the second section of the class, you do not really understand! What to do, you should know .... Go back to the goods.
But do you not think that the left and right side of each connection is too crowded, clinging to the left and right side of area A, what should be done? Still very simple, only need to add a word "padding:0 10px; "
#nav ul li A{display:block; height:35px color: #333; text-decoration:none; background: #0FF; float:left;padding:0 10px;}
Now look again, is not the effect of the following
Let's see if it's not crowded, haha, look comfortable, but this is only a step away from our desired effect, because now we see the connection effect is that the mouse to move up and away from the background are blue, we now only need to be, a link in the background removed, moved to the a:hover CSS code, And the color becomes "#000" OK ~
#nav ul Li A{display:block; height:35px; color: #333; text-decoration:none; float:left; padding:0 10px;}
#nav ul Li A:hover{color: #fff; text-decoration:underline;background: #000;}
How about the same effect as the following?
The effect is much better, this is what we want the effect of the bar ~
Of course! We can also set the background not to black, with a picture can also! Now you know why I said this navigation bar can evolve thousands of different features of the navigation bar ~ Same!
The idea of the lesson four is this, if thoroughly thorough this class, then what kind of navigation is very easy to make out, if you and JS very good combination of use ~ You can be very confident to the boss to raise a salary!!! ^_^
Next Class I will give you a floating way to layout a page, please look forward to!
This lesson is full of code:
">
Navigation production Arisisi collection
/* CSS Document * *
body,div,ul,li{padding:0; margin:0;}
a{font-size:12px;}
#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;
}
#nav ul Li A{display:block; height:35px; color: #333; text-decoration:none; float:left; padding:0 10px;}
#nav ul Li A:hover{color: #fff; text-decoration:underline; background: #000;}
This article comes from www.cssxuexi.cn * Respect others Labor achievements, reprint please consciously indicate the source!
