Xin Xing and you hand-written CSS navigation bars, and Xin Xing css navigation bars

Xin Xing and you hand-written CSS navigation bars, and Xin Xing css navigation bars

Step 1: Create a New my.html file with the following content:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Step 2: Create a New xin.css file, and then adjust the display format of these navigation bars. The first step is to remove the dots in the list. First, write the following code:


.nav ul{list-style-type: none;}
We found that the dots were gone, but now these list elements are arranged vertically and we want them to be arranged horizontally.

Step 3: Set the li floating 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;}
Step 4: We found that they are now together, but they are connected. Why? Because they are not set with width, we only need to set a certain width for them, they will be split, 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;}

Step 5, we will start to set the mouse style. By the way, we will remove the underline. We have previously introduced the concept of pseudo classes. If you are not familiar with it, you can also go to the previous tutorial and add the background color or something at the same time, so its code will look like 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;}
Step 6 is also from our problem. Let's adjust the size, that is, we set the. nav a attribute 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;}
Step 7 is that our navigation bar is stuck together. We need to make it more comfortable to separate the dishes. So let's set the li attribute here to set its margin to 3px, 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 has been completed. If the reader is a master, he may point out its shortcomings, but after all, it is handwritten and useless, let's take a look at the overall effect: