CSS page layout Getting Started Tutorial 11: Tabbed Landscape navigation with the current logo-Basic tutorial

Although the tabbed navigation has been completed, the square-shaped navigation does not seem to fit the current design trend, in fact navigation can be defined not only using CSS colors, but also using well-designed images or other elements to build the navigation, where we will begin to improve the navigation design, making it a better label effect.
We will consider removing a single square block background element and using a colored rounded label to complete our design. However, from this improvement can realize the CSS design another advantage, is that you can not need to modify the structure of the code, only need to modify the style, you can complete the improvement, so here you can directly see the design of CSS code:

<style> Body {background-color: #000000;} #nav {height:30px; list-style:none;} #nav li {float:left;} #nav li a {c Olor: #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 above code can be seen, we removed the background color of the setting, to the body tag of the page with a black background, a object was we placed a re-made GIF image, including normal, mouse over, the current Page three interactive state. But you will now, the pictures of these three states are on one sheet. Why is it? There is a design in the software, on the one hand, the use of image management, on the other hand, when downloading a Web page only download a picture on the line. And the picture is set as a background image only need to use CSS to control the location of the picture, it seems that the CSS is really powerful.
just by modifying the CSS code, the appearance of the change of the navigation, imagine that in the application of large sites, if we are not satisfied with a common module, and do not have to modify all the pages, can only change the style of implementation. CSS really makes your design easier.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 