无忧首页
网站模板
CMS模板
CMS教程
前台美工
网页特效
网站编程
网站运营
电脑网络
窗口页面类
图片广告代码
滚动类
滑动门选项卡
导航菜单类
表单状态栏
鼠标特效
时间日期类
文本链接类
综合特效
站长无忧
>
网页特效
>
滑动门选项卡
>
用Div+CSS实现滑动门效果-滑动门选项卡
来源:中国站长站 作者:ChianZ 更新时间:2008-12-21 点击: 次
Source Code to Run
[www.zz5u.net 站长无忧]
<!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技术实现</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">第一个内容</li> <li class="unblock">第二个内容</li> <li class="unblock">第三个内容</li> <li class="unblock">第四个内容</li> </ul> <!--内容显示区域--> </div> </body> </html>
运行代码
复制代码
另存代码
收藏本页
标签(Tag):
滑动门
CSS菜单
继续阅读滑动门选项卡
上一篇：没有了
下一篇：
CSS制作滑动折叠的文字效果
网站模板
CMS模板
CMS教程
推荐
报错
顶部
返回首页
相关滑动门选项卡：
滑动门代码
滑动门选项卡特效
通用滑动门代码
一段非常好的滑动门代码
滑动门代码
简单的选项卡与滑动门
CSS制作滑动折叠的文字效果
最新滑动门选项卡
滑动门代码
滑动门选项卡特效
通用滑动门代码
一段非常好的滑动门代码
滑动门代码
简单的选项卡与滑动门
css+js实现排行、滑动切换的新闻列表
CSS制作滑动折叠的文字效果
推荐滑动门选项卡
滑动门代码
css+js实现排行、滑动切换的新闻列表
用Div+CSS实现滑动门效果
Source Code to Run 