CSS Learning (3) horizontal navigation image beautification with current logo

Next, modify the navigation page. As follows:

Although the label-based navigation is completed, the square-like navigation does not seem to be able to adapt to the current design trend. In fact, navigation can be defined by CSS colors, you can also use well-designed images or other elements to build a navigation. Here we will begin to improve the navigation design and make it a better tag effect.
We will consider removing a single box-like background element and using a colored corner label to complete our design. However, from this improvement, we can see another advantage of CSS design, that is, the structure does not need to be modified.Code, You only need to modify the style to complete the improvement, so here you can look at the CSS code design:

<Style>
Body {background-color: #000000 ;}
# Nav {Height: 30px; List-style: none ;}
# Nav Li {float: Left ;}
# Nav Li a {color: # FFF; text-Decoration: none; padding-top: 4px; display: block; width: 118px; line-Height: 22px; Height: 24px; text-align: center; Background: url(1.gif); margin-left: 5px; font-size: 14px; font-weight: bold ;}
# Nav Li A: hover {Background: url(1.gif) Left-42px; color: # ffffff ;}
# Nav Li a # current {Background: url(1.gif) Left-84px; color: # FFF ;}
</Style>

From the code above, we can see that we have removed the background color setting, added a black background to the page body tag, and the object was placed with a new GIF image, it contains three interaction states: Normal, move the mouse up, and the current page. However, you will see images in one of these three states. Why? Here we use a design method in the software. On the one hand, we use image management, and on the other hand, we only need to download one image when downloading the webpage. When setting this image as a background image, you only need to use CSS to control the image position. It seems that the CSS function is so powerful.
Just by modifying the CSS code, we can change the appearance of the navigation. Imagine if we are not satisfied with a common module in the application of a large website, you don't have to modify all the pages. You can only change the style. CSS makes your design easier!

The first parameter after the URL is the left and right distance, and the second parameter is the upper and lower distance, which is different from padding and margin. The first parameter can be set to left, center, right, and the second parameter can be set to top, center, and bottom, which respectively indicate left, center, right, top, center, and bottom. You can also set the value to a specific number, indicating the number of pixels that are moved on the X and Y axes respectively. If you do not set these two items, the default value is Left top. Please refer to the default background image, which is prefixed in the Left top continuous form. The highlighted part indicates the original image, and the light color indicates the continuous part. The three background images are named as 1, 2, and 3. to locate them in the upper left corner of 2, you can go down from the center of the coordinates to 42px or 84px. To locate to the upper left corner of 3, you can go down-84px from the center of the coordinate, or 42px.