CSS web page layout tutorial 11: the label-based horizontal navigation image with the current logo

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 (http://www.aa25.cn/upfile/menu_bg.gif); margin-left: 5px; font-size: 14px; font-weight: bold ;}
# Nav Li A: hover {Background: URL (http://www.aa25.cn/upfile/menu_bg.gif) left 84px; color: # ffffff ;}
# Nav Li a # current {Background: URL (http://www.aa25.cn/upfile/menu_bg.gif) left 42px; 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!Xmlns = "http://www.w3.org/1999/xhtml">

• Home Page
• Div + CSS tutorial
• Common Code
• Crystal icon
• Slides
• Software Download
• Css2.0 Practical Manual