Although tabbed navigation has been completed, but the square-like navigation does not seem to be able to adapt to the current design trend, in fact, navigation can not only use the color of CSS to define, can also use well-designed pictures or other elements to build navigation, where we will begin to improve the design of navigation, make it a better label effect.
We will consider removing a single square block background element and using a rounded label with color to complete our design. However, from this improvement can appreciate the other advantage of CSS design, that is, you can not modify the structure of the code, only need to modify the style, you can complete the improvement, so you can see the design of CSS code directly:
<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 (yun_qi_img/menu_bg.gif); margin-left:5px; font-size:14px; Font-weight:bold;}
#nav li a:hover {background:url (yun_qi_img/menu_bg.gif) left 84px;; color: #ffffff;}
#nav Li a#current {background:url (yun_qi_img/menu_bg.gif) left 42px; color: #fff;}
</style>
From the above code can be seen, we removed the background color settings, to the page of the body tag plus a black background, a object was we placed a new GIF image, including normal, mouse over, the current page three kinds of interactive state. But you will now, the picture of these three states is on one sheet. Why, then? There is a design in the software, on the one hand, the use of picture management, on the other hand, download the Web page only to download a picture on the line. And this picture is set as a background image only need to use CSS control of the location of the picture, it seems that the CSS function is really too powerful.
Only by modifying the CSS code, it changed the appearance of the navigation, imagine the application of large Web sites, if we are not satisfied with a common module, also do not have to modify all the pages, can only change the style on the 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 "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title></title> <meta http-equiv = "Content-type" content= "text/html"; charset=gb2312 "/> <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 (yun_qi_img/menu_bg.gif); margin-left:5px; font-size:14px; Font-weight:bold;} #nav li a:hover {background:url (yun_qi_img/menu_bg.gif) left 84px;; color: #ffffff;} #nav Li a#current {background:url (yun_qi_img/menu_bg.gif) left 42px; color: #fff;} </style> </pead> <body> <ul id= "nav" > <li> home </li> <li>div+css Tutorials &L t;/li> <li> Common code </li> <li> CrystalIcon </li> <li> slide picture </li> <li> software download </li> <li>css2.0 practical manual </li> </u L> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
