网页制作特效代码园地
仿网易div+css滑动门选项卡效果
www.qpsh.com 更新日期：2008-7-29 人气指数 2036
<!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>DIV+CSS仿网易的滑动门技术AJAX</title> <style type="text/css"> <!-- #header { background-color: #F8F4EF; height: 200px; width: 400px; margin: 0px; padding: 0px; border: 1px solid #ECE1D5; font-family: "宋体"; font-size: 12px; } #menu { margin: 0px; padding: 0px; list-style-type: none; } #menu li { display: block; width: 100px; text-align: center; float: left; margin: 0px; padding-top: 0.2em; padding-right: 0px; padding-bottom: 0.2em; padding-left: 0px; cursor: hand; } .sec1 { background-color: #FFFFCC;} .sec2 { background-color: #00CCFF;} .block { display: block;} .unblock { display: none;} --> </style> </head> <body> <script language=javascript> function secBoard(n) { for(i=0;i<menu.childNodes.length;i++) menu.childNodes[i].className="sec1"; menu.childNodes[n].className="sec2"; for(i=0;i<main.childNodes.length;i++) main.childNodes[i].style.display="none"; main.childNodes[n].style.display="block"; } </script> <div id="header"> <ul id="menu"> <li onMouseOver="secBoard(0)" class="sec2">最新新闻</li> <li onMouseOver="secBoard(1)" class="sec1">最新文章</li> <li onMouseOver="secBoard(2)" class="sec1">最新日志</li> <li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li> </ul> <!--内容显示区域--> <ul id="main"> <li class="block">第一个内容,<a href="http://www.qpsh.com/">欢迎访问网页特效代码</a></li> <li class="unblock">第二个内容,<a href="http://www.qpsh.com/">欢迎访问网页特效代码</a></li> <li class="unblock">第三个内容,<a href="http://www.qpsh.com/">欢迎访问网页特效代码</a></li> <li class="unblock">第四个内容,<a href="http://www.qpsh.com/">欢迎访问网页特效代码</a></li> </ul> <!--内容显示区域--> </div> </body> </html>
【返回首页】【刷新本页】【返回顶部】【关闭本页】
本类热门
12/23/2007
7/29/2008
12/22/2007
6/23/2008
本类最新
最具人气
36022
22797
18792
17991
17768
14365
14231
12149
常用特效
2474
5183
2408
2435
2998
2439
3793
推荐特效
3403
6665
2267
1739
5148
10746
11603
2904
CopyRight © 网页特效代码 2006 - 2007 Qpsh.Com All rights reserved
