一个相当简单的网站横向导航菜单特效

2007-08　　作者：佚名　　来源：不详　网友评论　

网页特效代码实例，一个相当简单的网站横向导航菜单，用DIV+CSS制作的！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>一个简单的CSS制作的网站横向导航菜单58mb.com</title> <script> window.onload=function(){ var li=document.getElementById("nav").getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].onmouseout=function(){ this.style.backgroundColor=""; } li[i].onmouseover=function(){ this.style.backgroundColor="green"; } } } </script> </head> <body style="background-color: #5396a4; background-repeat:repeat-x" > <style> ul,li{ margin:0px; padding:0px;list-style-type: none;} li{background-color:gray} #nav{} #nav li{ float:left; margin-left:10px; height:30px; padding-top:8px; width:80px; text-align:center; overflow:hidden;} #nav li a { margin-top:5px;} #nav span{display:none;} #nav a{font-size:13px;font-weight: bold;color: #FFFFFF;text-decoration: none; display:block;} #nav a:hover{ color:#7c7c7c;top:1px; left:1px; position:relative;} #nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; color:#FFFFFF;cursor:pointer; font-weight:bolder} </style> <div onmouseout="" onmouseover="" id="nav"> <ul> <li><a href="#" >网站首页<span>网站首页</span></a></li> <li><a href="#">网站首页<span>网站首页</span></a></li> <li><a href="#" >网站首页<span>网站首页</span></a></li> <li><a href="#">网站首页<span>网站首页</span></a></li> <li><a href="#">网站首页<span>网站首页</span></a></li> </ul> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

>> 更多评论