1. 爱易网页
2. JS特效
3. 中英文变化导航菜单

日期：2014-05-18　 浏览次数：20241 次

以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="bilingual menu,中英文双语菜单" /> <meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /> <meta content="all" name="robots" /> <meta name="author" content="forestgan" /> <meta name="copyright" content="http://www.forest53.com" /> <title>完全用CSS实现的中英文双语导航菜单</title> <style type="text/css"> a{ color: #FFFF99; text-decoration: none; } a:hover{ color: #FFFFFF; text-decoration: underline; } #nav{ padding: 10px 10px 0; font-size: 12px; font-weight: bold; margin: 1em 0 0; list-style:none; } #nav li{ float: left; margin-right: 1px; } .bi{ position: relative; z-index: 0; } .bi:hover{ z-index: 99; } .bi:hover span{ visibility: visible; top: 0; left: 0; cursor: pointer; } .bi span{ position: absolute; left: -999em; visibility: hidden; } #nav li a,.bi:hover span{ line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } #nav li a:hover,.bi:hover span{ color: #FFFFFF; background: #DC4E1B; } .bi:hover span{ padding-top: 2px; } #navbar{ background: #DC4E1B; height: 8px; overflow: hidden; clear: both; } </style> <link href="../css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="top"> <ul id="nav"> <li><a class="bi" href="index.html">Home<span>红色黑客</span></a></li> <li><a class="bi" href="about.html">About us<span>萧萧小雨</span></a></li> <li><a class="bi" href="products.html">Products<span>诘屈聱牙</span></a></li> <li><a class="bi" href="services.html">Services<span>艾克司令</span></a></li> <li><a class="bi" href="contact.html">Contact<span>红色冬天</span></a></li> <li><a class="bi" href="index.html">Home<span>草木之人</span></a></li> <li><a class="bi" href="about.html">About us<span>风中剑影</span></a></li> <li><a class="bi" href="products.html">Products<span>修罗化蝶</span></a></li> <li><a class="bi" href="services.html">Services<span>垃圾青蛙</span></a></li> <li><a class="bi" href="contact.html">Contact<span>我太低调</span></a></li> <li><a class="bi" href="index.html">Home<span>闭门苦研</span></a></li> </ul> <div id="navbar"></div></font> <a href="http://js.aiyiweb.com/">欢迎访问爱易网网页特效代码站，js.aiyiweb.com</a>

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