Sinsing with you with the CSS handwriting navigation bar

The first step, we create a new my.html file, fill in the content as follows, the HTML file until the end is not moving, it is the content:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > 
The second step, we start to create a new Xin.css file, and then start to adjust the display format of these navigation bars, we have to do the first step is to remove the list of small dots first, we first write the following code:
. Nav Ul{list-style-type:none;}
We found that the dots were gone, but now that the list elements are vertically arranged, we want them to be arranged horizontally.
In the third step, we set the Li floats to arrange them horizontally, we add the code in the second line, so the entire code becomes:
. Nav Ul{list-style-type:none;}. Nav Li{float:left;}
The fourth step, we found that now they are together, but it is connected, this is why, because they do not set the width, we just give them a certain width, they will be separated, but we can also set the background color, so the code becomes the following code:
. Nav Ul{list-style-type:none;}. Nav li{float:left;width:100px;background: #CCC;}
The fifth step we began to set the mouse style, by the way we have to remove the underscore, we have introduced the concept of pseudo-class, if the reader is not familiar with, you can go to the front of my tutorial, we also add the background color what, so its code becomes the following:
. Nav Ul{list-style-type:none;}. Nav li{float:left;width:100px;background: #CCC;}. Nav a:link{color: #666; background: #CCC; text-decoration:none;}. Nav a:visited{color: #666; text-decoration:none;}. Nav a:hover{color: #FFF; Font-weight:bold;text-decoration:underline;background: #0F0;}
The sixth step is also from our problem, we adjust the size, that is, we set the. Nav A's property value, the code is as follows:
. Nav Ul{list-style-type:none;}. Nav li{float:left;width:100px;}. Nav a:link{color: #666; background: #CCC; text-decoration:none;}. Nav a:visited{color: #666; text-decoration:none;}. Nav a:hover{color: #FFF; Font-weight:bold;text-decoration:underline;background: #0F0;}. Nav A{display:block;text-align:center;height:30px;font-weight:bold;}
The seventh step is that our navigation bar is glued together, we need to separate the dishes to look more comfortable, so we set the Li property here, let its margin set to 3px, and then the size of the font to fit the size of the navigation bar, the final code is as follows:
. Nav Ul{list-style-type:none;}. Nav li{float:left;width:100px;margin-left:3px;line-height:30px;}. Nav a:link{color: #666; background: #CCC; text-decoration:none;}. Nav a:visited{color: #666; text-decoration:none;}. Nav a:hover{color: #FFF; Font-weight:bold;text-decoration:underline;background: #0F0;}. Nav A{display:block;text-align:center;height:30px;font-weight:bold;}

So far, our navigation bar is done, if the reader is a master, may point out its shortcomings, but after all, with handwritten, no use any of the pictures, let us look at the overall effect of:







Sinsing with you with the CSS handwriting navigation bar