| 本月文章推荐 |
一个相当简单的网站横向导航菜单特效发表日期：2007-12-21
|
|
<!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制作的网站横向导航菜单 knowsky.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> |
| 上一篇：纯CSS实现的鼠标经过文本时提示的信息
人气:984 下一篇：CSS实现的网页中文字排版的几种方式 人气:1340 |
| 浏览全部导航菜单的内容
Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐 |
