Author: Zishu
The following is a navigation bar applied on the guest site.
This is not written directly in the style with the form of ID control. All class forms;
Copy Code code as follows:
<style type= "Text/css" >
#zishu li{float:left; margin-left:5px; margin-top:50px;}
. nav_a a:link,.nav_a A:visited{text-decoration:none display:block; padding-right:10px; Background:url (/upload/ 20073614410846.gif) No-repeat right top;margin-top:3px; Color: #000; Float:left;}
. nav_a Span{cursor:hand;background-color: #DBF0C4; Font-size:14px;background:url (/upload/20073614414862.gif) No-repeat; Display:block; line-height:29px; padding-left:10px; Cursor:hand; Float:left;}
. nav_a a:hover,.nav_a Active{text-decoration:none display:block; padding-right:10px; Background:url (/upload/ 20073614410846.gif) No-repeat right bottom;margin-top:0px; Color: #000}
. nav_a a:hover span,.nav_a a:active span{background-color: #DBF0C4; Font-size:14px;background:url (/upload/ 20073614414862.gif) no-repeat left bottom; Display:block; line-height:29px; padding-left:10px; margin-top:0px; padding-top:1px; padding-bottom:2px; Cursor:hand;}
#box {background: #009900; height:4px; overflow:hidden; Clear:both}
</style>
The following is the body section:
Copy Code code as follows:
<ul id= "Zishu" >
<li class= "nav_a" ><a href= "http://fenlei.zishu.cn/l.php?c=2104&a=21" ><span> Part-time Internship </span ></a></li>
<li class= "nav_a" ><a href= "http://fenlei.zishu.cn/l.php?c=2107&a=21" ><span> Vehicle Sales </span ></a></li>
<li class= "nav_a" ><a href= "http://fenlei.zishu.cn/l.php?c=2101&a=21" ><span> City activities </span ></a></li>
<li class= "nav_a" ><a href= "http://fenlei.zishu.cn/l.php?c=2102&a=21" ><span> House Rental Sales </span ></a></li>
<li class= "nav_a" ><a href= "http://fenlei.zishu.cn/l.php?c=2105&a=21" ><span> the same city seek edge </span ></a></li>
<li class= "nav_a" ><a href= "http://fenlei.zishu.cn/l.php?c=2103&a=21" ><span> Flea Market </span ></a></li>
<li class= "nav_a" ><a href= "http://fenlei.zishu.cn/l.php?c=2108&a=21" ><span> Personal services </span ></a></li>
<li class= "nav_a" ><a href= "http://fenlei.zishu.cn/l.php?c=2106&a=21" ><span> Learning and training </ Span></a></li>
</ul>
Effect Display:
<! 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> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>zishu.cn</title> <style type=" Text/css "> #zishu li{float:left; margin- left:5px; margin-top:50px;} . nav_a a:link,.nav_a A:visited{text-decoration:none display:block; padding-right:10px; Background:url (/upload/ 20073614410846.gif) No-repeat right top;margin-top:3px; Color: #000; Float:left;} . nav_a Span{cursor:hand;background-color: #DBF0C4; Font-size:14px;background:url (/upload/20073614414862.gif) No-repeat; Display:block; line-height:29px; padding-left:10px; Cursor:hand; Float:left;} . nav_a a:hover,.nav_a Active{text-decoration:none display:block; padding-right:10px; Background:url (/upload/ 20073614410846.gif) No-repeat right bottom;margin-top:0px; Color: #000}. nav_a a:hover span,.nav_aA:active span{background-color: #DBF0C4; Font-size:14px;background:url (/upload/20073614414862.gif) No-repeat left Bottom Display:block; line-height:29px; padding-left:10px; margin-top:0px; padding-top:1px; padding-bottom:2px; Cursor:hand;} #box {background: #009900; height:4px overflow:hidden; Clear:both} </style> </pead> <body> <ul ID = "Zishu" > <li class= "nav_a" ><span> Part-time internship </span></li> <li class= "Nav_a" ><span> Vehicle trading </span></li> <li class= "Nav_a" ><span> City activities </span></li> <li class= "Nav_a" ><span> House Rental </span></li> <li class= "Nav_a" ><span> the same city seek edge </span></li> <li class= "nav_a" ><span> Flea market </span></li> <li class= "nav_a" ><span> Personal services </ span></li> <li class= "nav_a" ><span> Learning and training </span></li> </ul> <div id= "box "></div> </body> </ptml&Gt
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Description
1.CSS does not have a special optimization.
2. Can automatically adapt to many words and fewer words. For example: Learning and training is 7 words;
3. Two pictures were used. One on the left, one on the right.
4. Add the mouse to move up and jump the effect;
5. This example is not complex to write. suitable for beginners;
If you think this color is not hyun, you can look at this example. Maybe you'll like it.
Imitation Taobao home navigation bar layout effect
