firefox
首页
一段非常好的滑动门可感应触发或点击触发兼容IE7 IE6 FireFox Opera
日期：2007-05-20 09时
<!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>我的滑动门</title> <style type="text/css"> body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 960px; margin: 0 auto; border-bottom:1px #AACCEE solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 22px; overflow: hidden; } .nTab .TabTitle ul{ border:0; margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 70px; cursor: pointer; padding-top: 4px; padding-right: 0px; padding-left: 0px; padding-bottom: 2px; list-style-type: none; } .nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;} .nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;} .nTab .TabContent{ width:auto;background:#fff; margin: 0px auto; padding:10px 0 0 0; border-right:1px #AACCEE solid;border-left:1px #AACCEE solid; } .none {display:none;} </style> </head> <body> <br /> <br /> <ul id="myTab0"> <li class="active" onmouseover="nTabs(this,0);">全部 <li class="normal" onmouseover="nTabs(this,1);">日志 <li class="normal" onmouseover="nTabs(this,2);">咨询 <li class="normal" onmouseover="nTabs(this,3);">相册 <li class="normal" onmouseover="nTabs(this,4);">商城 <li class="normal" onmouseover="nTabs(this,5);">社区 000 111 222 333 444 555 <ul id="myTab1"> <li class="active" onclick="nTabs(this,0);">aaa <li class="normal" onclick="nTabs(this,1);">bbb <li class="normal" onclick="nTabs(this,2);">ccc <li class="normal" onclick="nTabs(this,3);">单击 000 111 222 333 </body> </html>
提示：您可以先修改部分代码再运行
再发
无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marqu
<!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"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>Fifty Studio│无间断滚动的新闻文章列表</title> <link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css" /> @import url("/tutorials/demo/css/ie.css"); </style><![endif] <style type="text/css"> a{background:#FFF; color:#333;} a:hover{background:#FFF;color: #C00;} #demo ul{text-align: left; } #demo li a{line-height:2em; padding-left:1.5em;background: #F7F7F7 url(/img/arrow_l2_over.gif) no-repeat 0 50%;display: block;margin-bottom: 1px;} #FGWrapper{width: 400px; margin:2em auto; background:#EEE;} #demo{overflow:hidden; width: 390px;height: 150px; background:#FFF;margin: 5px;float: left;display: inline;} #desc{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:left;} #copyright{float: right;} </style> <noscript> <style type="text/css"> #demo{overflow:auto; } } </style> </noscript> </head> <body> <a href="/"><img src="/img/logo.gif" width="170" height="40" alt="Fifty Studio" class="logo" /></a> CSS 布局演示 CSS Layout by Forestgan <h2 id="demo_date">2006-11-1 发表 <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=76" title="三列自适应宽度液态布局│Three Column Liquid Layouts">三列自适应宽度液态布局│Three Column Liquid Layouts </a> <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=75" title="Internet Explorer 7 对CSS的兼容--Box Model Changes">Internet Explorer 7 对CSS的兼容--Box Model Changes </a> <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=74" title="未知大小的图片在一个已知大小容器中的水平和垂直居中（二）">未知大小的图片在一个已知大小容器中的水平和垂直居中（二） </a> <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=73" title="为不同的浏览器载入不同CSS的二种方法CSS Browser Selector">为不同的浏览器载入不同CSS的二种方法CSS Browser Selector </a> <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=72" title="用ASP程序模拟实现first-child的功能">用ASP程序模拟实现first-child的功能 </a> <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=71" title="本地检验网页是否符合标准的几种方法">本地检验网页是否符合标准的几种方法 </a> <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=70" title="Accessibility和General Developer工具">Accessibility和General Developer工具 </a> <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=69" title="未知总宽度的列表菜单水平居中的解决方案">未知总宽度的列表菜单水平居中的解决方案 </a> <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=68" title="为机器人程序预备的robots.txt文件">为机器人程序预备的robots.txt文件 </a> <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=67" title="未知大小图片在已知容器中的垂直和水平居中问题">未知大小图片在已知容器中的垂直和水平居中问题 </a> <a href="http://www.forest53.com">Design by Forestgan</a>文章列表无间断滚动演示 <address> 演示页面设计制作： <a href="http://www.forest53.com">Forestgan</a> 采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途<br /><a href="javascript:history.back()">返回前一页</a> </address> <noscript> <p>google-analytics</p> </noscript> <noscript><p>my stat</p></noscript> </body> </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"> <head> <title>标准布局应用：选项卡</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="PR" /> <style type="text/css"> /* 选项卡要害属性 */ #tab { width:570px; height:260px; position:relative; } /*设置容器高宽等*/ html > body #tab { width:566px; }/*兼容IE6:IE6下宽度不够*/ #tab div { position:absolute; top:26px; left:0; width:564px; height:234px; border:solid #eee; border-width:0 1px 1px; }/*设置被操作容器高宽等*/ #tab div { display:none; }/*设置被操作容器默认隐藏:不用ID是因为下面将利用class来控制被操作容器显示,而class优先级低于id选择器*/ #tab .block { display:block; }/*选中的被操作容器*/ #tab h3 { float:left; width:114px; height:26px; line-height:26px; margin:0 -1px 0 0; font-size:14px; cursor:pointer; font-weight:normal; text-align:center; color:#00007F; background:#eee url(http://blog.pr1984.com/attachments/month_0612/720061212105226.gif) no-repeat; }/*默认标题样式*/ #tab .up { background:#fff url(http://blog.pr1984.com/attachments/month_0612/x20061212105231.gif) no-repeat; }/*选中的标题样式*/ /*修饰列表内容*/ #tab ul { margin:15px 0 0; list-style:none; padding:0; } #tab li { float:left; width:50%; background:url(http://blog.pr1984.com/attachments/month_0612/a20061212105235.gif) no-repeat 25px 10px; } #tab li a { display:block; width:84%; height:25px; line-height:25px; margin-left:8%; font-size:12px; text-decoration:none; color:#333; background:url(http://blog.pr1984.com/attachments/month_0612/g20061212105238.gif) repeat-x left bottom; text-indent:10px; } #tab li a:hover { text-decoration:underline; color:#f00; } </style> </head> <body> <h3 class="up" onclick="go_to(1);">选择一 <a href="#">1张钰和于连的同源悲剧 </a> <a href="#">从人大代表侯建军终审 </a> <a href="#">车辆交付问题 </a> <a href="#">贻误申请执行期限损失 </a> <a href="#">民警特权扣车,油变成 </a> <a href="#">地下室及公摊面积不收 </a> <a href="#">当前医疗广告存在的问 </a> <a href="#">新医改要注重的几个问 </a> <a href="#">张钰和于连的同源悲剧 </a> <a href="#">从人大代表侯建军终审 </a> <a href="#">车辆交付问题 </a> <a href="#">贻误申请执行期限损失 </a> <a href="#">民警特权扣车,油变成 </a> <a href="#">地下室及公摊面积不收 </a> <a href="#">当前医疗广告存在的问 </a> <a href="#">新医改要注重的几个问 </a> <h3 onclick="go_to(2);">选择二 <a href="#">2张钰和于连的同源悲剧 </a> <a href="#">从人大代表侯建军终审 </a> <a href="#">车辆交付问题 </a> <a href="#">贻误申请执行期限损失 </a> <a href="#">民警特权扣车,油变成 </a> <a href="#">地下室及公摊面积不收 </a> <a href="#">当前医疗广告存在的问 </a> <a href="#">新医改要注重的几个问 </a> <a href="#">张钰和于连的同源悲剧 </a> <a href="#">从人大代表侯建军终审 </a> <a href="#">车辆交付问题 </a> <a href="#">贻误申请执行期限损失 </a> <a href="#">民警特权扣车,油变成 </a> <a href="#">地下室及公摊面积不收 </a> <a href="#">当前医疗广告存在的问 </a> <a href="#">新医改要注重的几个问 </a> <h3 onclick="go_to(3);">选择三 <a href="#">3张钰和于连的同源悲剧 </a> <a href="#">从人大代表侯建军终审 </a> <a href="#">车辆交付问题 </a> <a href="#">贻误申请执行期限损失 </a> <a href="#">民警特权扣车,油变成 </a> <a href="#">地下室及公摊面积不收 </a> <a href="#">当前医疗广告存在的问 </a> <a href="#">新医改要注重的几个问 </a> <a href="#">张钰和于连的同源悲剧 </a> <a href="#">从人大代表侯建军终审 </a> <a href="#">车辆交付问题 </a> <a href="#">贻误申请执行期限损失 </a> <a href="#">民警特权扣车,油变成 </a> <a href="#">地下室及公摊面积不收 </a> <a href="#">当前医疗广告存在的问 </a> <a href="#">新医改要注重的几个问 </a> <h3 onclick="go_to(4);">选择四 <a href="#">4张钰和于连的同源悲剧 </a> <a href="#">从人大代表侯建军终审 </a> <a href="#">车辆交付问题 </a> <a href="#">贻误申请执行期限损失 </a> <a href="#">民警特权扣车,油变成 </a> <a href="#">地下室及公摊面积不收 </a> <a href="#">当前医疗广告存在的问 </a> <a href="#">新医改要注重的几个问 </a> <a href="#">张钰和于连的同源悲剧 </a> <a href="#">从人大代表侯建军终审 </a> <a href="#">车辆交付问题 </a> <a href="#">贻误申请执行期限损失 </a> <a href="#">民警特权扣车,油变成 </a> <a href="#">地下室及公摊面积不收 </a> <a href="#">当前医疗广告存在的问 </a> <a href="#">新医改要注重的几个问 </a> <h3 onclick="go_to(5);">选择五 <a href="#">5张钰和于连的同源悲剧 </a> <a href="#">从人大代表侯建军终审 </a> <a href="#">车辆交付问题 </a> <a href="#">贻误申请执行期限损失 </a> <a href="#">民警特权扣车,油变成 </a> <a href="#">地下室及公摊面积不收 </a> <a href="#">当前医疗广告存在的问 </a> <a href="#">新医改要注重的几个问 </a> <a href="#">张钰和于连的同源悲剧 </a> <a href="#">从人大代表侯建军终审 </a> <a href="#">车辆交付问题 </a> <a href="#">贻误申请执行期限损失 </a> <a href="#">民警特权扣车,油变成 </a> <a href="#">地下室及公摊面积不收 </a> <a href="#">当前医疗广告存在的问 </a> <a href="#">新医改要注重的几个问 </a> </body> </html>
提示：您可以先修改部分代码再运行
学习到了.....谢谢楼主
兼容IE和FireFox的间隔滚动代码
收藏
谢谢楼主，正在找此方面资料，你可帮了忙哦。
这种滑动门的感应触发能不能加上鼠标感应时间？？比如200毫秒……
期待 弓虽 人
收藏～～～
3ks!收藏
THANK YOU
好东西。。
真是好东西 介绍的也很具体 谢谢
顶！顶！顶！顶！
非常感谢！！
喜欢最后一个，比较考谱！
收藏.收藏
#2的滚动在衔接上有很明显的跳动
小弟愚昧。请问假如是要在一个页面使用两个这样的效果。那要怎么些？》
我有个问题
楼主可以帮下忙吗？
刚才没注重看到楼主的备注说明。现在看到了。谢谢楼主！
不错，收藏了
收藏～～～
收藏 谢谢楼主
真是好东西 介绍的也很具体 谢谢
第二个不是无间断啊.中间会停一下啊.
同上 第二个不间断中间会明显的跳一下
收藏学习。谢谢
搂住可以做一个2级或者3级的滑门不,做个样式给小弟看看,谢谢了!!!!
不错的东西 苦于不会JS 先收了以后研究 3Qlz
•
上一篇：
没有s60证书，第三方软件是否可以正常运用？
•
下一篇：
求助关于firefox
Copyright ©2000-2007
firefox