- nicehost
-
* 回复内容中包含的链接未经审核,可能存在风险,暂不予完整展示!这是滑动门
<!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>自适应宽度圆角滑动门——兼容IE6,IE7,IE8,FF,Opear</title>
<style type="text/css">
html{filter:expression(document.execCommand("BackgroundImageCache", false, true))}
body{text-align:center;font:12px Verdana,sans-serif;margin:5px 0}
ul,ol,li{margin:0;padding:0;border:0;list-style-type:none} input,select{font-size:12px}
a{color:#010101;text-decoration:none;outline:none} a:hover{text-decoration:underline}
.Tab{height:100%;text-align:left}
.Tab .title,.Tab .title div,.Tab .title .n1,.Tab .title .n1 span,.Tab .title .n2,.Tab .title .n2 span{background:url("http://www.6***.com/demo/021/images/tab_bg.gif") no-repeat left top}
.Tab .title{height:30px;padding-left:10px}
.Tab .title div{background-position:right top;display:block;height:100%}
.Tab .title .n1,.Tab .title .n2{background-position:left bottom;height:26px;line-height:26px; display:block;float:left;text-align:center;padding-left:12px;margin-top:4px;margin-left:1px;color:#333; text-decoration:none}
.Tab .title .n1 span,.Tab .title .n2 span{background-position:right bottom;display:block;padding-right:12px}
.Tab .title .n2{background-position:left -30px}
.Tab .title .n2 span{background-position:right -30px}
.tabcon ul{margin:5px auto;padding:0}
.tabcon ul li{height:24px;line-height:24px;padding-left:16px;overflow:hidden;display:block}
</style>
<script type="text/javascript">
function $(obj){return document.getElementById(obj)}
function Tab(Xname,Cname,Lenght,j){for(i=1;i<Lenght;i++){eval("$(""+Xname+i+"").className="n2"");}eval("$(""+Xname+j+"").className="n1"");for(i=1;i<Lenght;i++){eval("$(""+Cname+i+"").style.display="none"");eval("$(""+Cname+j+"").style.display="block"");}}
</script>
</head>
<body>
<div style="width:500px;margin:0 auto">
<p>onmouseover事件</p>
<div class="Tab">
<div class="title">
<a href="#" id="a1" class="n1" onmouseover="Tab("a","ax",6,1)"><span>素材</span></a>
<a href="#" id="a2" class="n2" onmouseover="Tab("a","ax",6,2)"><span>精选代码</span></a>
<a href="#" id="a3" class="n2" onmouseover="Tab("a","ax",6,3)"><span>图片</span></a>
<a href="#" id="a4" class="n2" onmouseover="Tab("a","ax",6,4)"><span>DIV+CSS</span></a>
<a href="#" id="a5" class="n2" onmouseover="Tab("a","ax",6,5)"><span>站长手册站长必读选项卡tab宽度测试</span></a>
<div></div>
</div>
<div class="tabcon">
<ul id="ax1">
<li><a href="http://www.6***.com/sc/psd/200811/235.shtml" target="_blank">2009新春PSD素材合辑 2009-1-18</a></li>
<li><a href="http://www.6***.com/sc/pic/200812/256.shtml" target="_blank">图片素材专辑之《水·清纯篇》 2009-1-18</a></li>
<li><a href="http://www.6***.com/sc/pic/200812/257.shtml" target="_blank">图片素材专辑之《叶·叶脉篇》 2009-1-18</a></li>
</ul>
<ul id="ax2" style="display:none">
<li><a href="http://www.6***.com/sc/code/200810/119.shtml" target="_blank">24小时退弹一次的代码,支持SP2SP3遨游 </a></li>
<li><a href="http://www.6***.com/sc/code/200810/86.shtml" target="_blank">一款经典幻灯片轮换特效 </a></li>
<li><a href="http://www.6***.com/sc/code/200810/85.shtml" target="_blank">符合WEB标准的间隙/间歇滚动代码(兼容IE及FireFox)</a></li>
</ul>
<ul id="ax3" style="display:none">
<li><a href="http://www.6***.com/sc/pic/200812/264.shtml" target="_blank">图片素材专辑之《树木·森林篇》</a></li>
<li><a href="http://www.6***.com/sc/pic/200812/265.shtml" target="_blank">图片素材专辑之《人物·男性特写篇》</a></li>
<li><a href="http://www.6***.com/sc/pic/200812/266.shtml" target="_blank">图片素材专辑之《人物·女性健美篇》</a></li>
</ul>
<ul id="ax4" style="display:none">
<li><a href="http://www.6***.com/tech/css/200811/159.shtml" target="_blank">CSS的常用20条技巧整理 </a></li>
<li><a href="http://www.6***.com/tech/css/200810/105.shtml" target="_blank">CSS语法缩写规则一览 </a></li>
<li><a href="http://www.6***.com/tech/css/200810/101.shtml" target="_blank">css网页设计中需要注意的几个问题</a></li>
</ul>
<ul id="ax5" style="display:none">
<li><a href="http://www.6***.com/tech/master/200809/1.shtml" target="_blank">Windows 2003 平台轻松安装最新的IIS+php+Mysql WEB运行环境</a></li>
<li><a href="http://www.6***.com/tech/master/200901/308.shtml" target="_blank">搜索引擎优化中容易犯的一些错误 </a></li>
<li><a href="http://www.6***.com/tech/master/200812/292.shtml" target="_blank">个人站长让网站流量增加几倍的方法</a></li>
</ul>
</div>
</div>
<p>onclick事件</p>
<div class="Tab">
<div class="title">
<a href="#" id="b1" class="n1" onclick="Tab("b","bx",6,1)"><span>素材</span></a>
<a href="#" id="b2" class="n2" onclick="Tab("b","bx",6,2)"><span>精选代码</span></a>
<a href="#" id="b3" class="n2" onclick="Tab("b","bx",6,3)"><span>图片</span></a>
<a href="#" id="b4" class="n2" onclick="Tab("b","bx",6,4)"><span>DIV+CSS</span></a>
<a href="#" id="b5" class="n2" onclick="Tab("b","bx",6,5)"><span>站长手册站长必读选项卡tab宽度测试</span></a>
<div></div>
</div>
<div class="tabcon">
<ul id="bx1">
<li><a href="http://www.6***.com/sc/psd/200811/235.shtml" target="_blank">2009新春PSD素材合辑 2009-1-18</a></li>
<li><a href="http://www.6***.com/sc/pic/200812/256.shtml" target="_blank">图片素材专辑之《水·清纯篇》 2009-1-18</a></li>
<li><a href="http://www.6***.com/sc/pic/200812/257.shtml" target="_blank">图片素材专辑之《叶·叶脉篇》 2009-1-18</a></li>
</ul>
<ul id="bx2" style="display:none">
<li><a href="http://www.6***.com/sc/code/200810/119.shtml" target="_blank">24小时退弹一次的代码,支持SP2SP3遨游 </a></li>
<li><a href="http://www.6***.com/sc/code/200810/86.shtml" target="_blank">一款经典幻灯片轮换特效 </a></li>
<li><a href="http://www.6***.com/sc/code/200810/85.shtml" target="_blank">符合WEB标准的间隙/间歇滚动代码(兼容IE及FireFox)</a></li>
</ul>
<ul id="bx3" style="display:none">
<li><a href="http://www.6***.com/sc/pic/200812/264.shtml" target="_blank">图片素材专辑之《树木·森林篇》</a></li>
<li><a href="http://www.6***.com/sc/pic/200812/265.shtml" target="_blank">图片素材专辑之《人物·男性特写篇》</a></li>
<li><a href="http://www.6***.com/sc/pic/200812/266.shtml" target="_blank">图片素材专辑之《人物·女性健美篇》</a></li>
</ul>
<ul id="bx4" style="display:none">
<li><a href="http://www.6***.com/tech/css/200811/159.shtml" target="_blank">CSS的常用20条技巧整理 </a></li>
<li><a href="http://www.6***.com/tech/css/200810/105.shtml" target="_blank">CSS语法缩写规则一览 </a></li>
<li><a href="http://www.6***.com/tech/css/200810/101.shtml" target="_blank">css网页设计中需要注意的几个问题</a></li>
</ul>
<ul id="bx5" style="display:none">
<li><a href="http://www.6***.com/tech/master/200809/1.shtml" target="_blank">Windows 2003 平台轻松安装最新的IIS+php+Mysql WEB运行环境</a></li>
<li><a href="http://www.6***.com/tech/master/200901/308.shtml" target="_blank">搜索引擎优化中容易犯的一些错误 </a></li>
<li><a href="http://www.6***.com/tech/master/200812/292.shtml" target="_blank">个人站长让网站流量增加几倍的方法</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
- 皮皮
-
标题一个DIV
可以用ul li 我一般用ul li ,你用DIV 也可以实现
标题要切换块不要用边框
建议用背景
内容一个DIV
2个ul
基本上就这样
- 瑞瑞爱吃桃
-
标题一个DIV,两个菜单都用<li>来实现
内容一个DIV。基本上和楼上一样:P
- wio
-
只可意会,不可言传啊!!!
呵呵,其实很简单。
- FinCloud
-
2个DIV