热心网友
回答时间:2024-05-17 10:40
我这儿有。也有源文件。这样的问题你不应该在这儿问,应该多去找。呵呵。
<!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>网易126免费邮――逍遥3.0</title>
<link href="xy3.0.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
<!--
var nTime = 3;
var nFocus= 0;
var bFlag = false;
var aLiTab , aDivTab;
/*自动跳转
function fAutoSwitch(){
var n = nFocus + 1;
if(n >=3){
n = 0;
}
if(!bFlag){
aLiTab[n].onmouseover();
bFlag = false;
}
}
*/
window.onload = function(){
var $ = function($){
return document.getElementById($);
};
aLiTab = $("oUlTab").getElementsByTagName("li");
aDivTab = [$("oDivTab1") , $("oDivTab2") , $("oDivTab3")];
for(var i=0;i<aLiTab.length;i++){
(function(i){
var t = aLiTab[i];
t.onmouseover = function(){
if(nFocus != i){
aLiTab[nFocus].className = "";
aDivTab[nFocus].style.display = "none";
nFocus = i;
aLiTab[nFocus].className = "on";
aDivTab[nFocus].style.display = "";
}
bFlag = true;
};
t.onmouseout = function(){
bFlag = false;
};
})(i);
}
};
//-->
</script>
</head>
<body>
<div class="ent_c">
<div class="bq">
<ul id="oUlTab">
<li class="on" ><a href="#">多窗口操作</a></li>
<li ><a href="#">超快速度</a></li>
<li ><a href="#">自动保存</a></li>
</ul>
</div>
<!---多窗口操作--->
<div class="bq_d" id="oDivTab1">
<div class="bq_n">
<img src="http://mimg.163.com/hd/126/070521_126xy3.0/img/dbq.gif" /><br />
<div class="c4"> 逍遥3.0版本支持多窗口操作,你可以在不同邮件之间轻松快速切换。<br />
新版本有点像时下最流行的多页面式IE浏览器,可以在一个窗口中同时打开多个页面,切换响应速度之快令人惊奇,大大提高了工作效率。<br />
</div>
</div>
</div>
<div class="bq_d" id="oDivTab2" style="display:none">
<div class="bq_n">
<img src="http://mimg.163.com/hd/126/070521_126xy3.0/img/cksd.gif" /><br />
<div class="c4"> 让邮箱的速度越来越快一直是我们追求的目标。逍遥3.0大量页面使用了创新Ajax技术, 同等网络环境下,页面响应时间减少90%以上,快来体验前所未有的快速邮箱操作吧!<br />
</div>
</div>
</div>
<div class="bq_d" id="oDivTab3" style="display:none">
<div class="bq_n">
<img src="http://mimg.163.com/hd/126/070521_126xy3.0/img/zdbc.gif" /><br />
<div class="c4"> 你再也不用担心辛苦所写的邮件会因网络、电力中断等问题而丢失。126逍遥3.0邮箱系统会自动保存正在录入的邮件,从此高枕无忧。<br />
</div>
</div>
</div>
</div>
</body>
</html>
全部的代码。
至于样式可以自己写了。
body,div,img,a,b,p,form,table,tr,td{text-align: center; margin: 0px;padding: 0px;list-style-type:none;font-size:12px;color:#0c0c0b; line-height:180%}
body{background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/line_d.gif) bottom repeat-x; background-color:#FFFFFF}
a{text-decoration:none;}
a:hover{text-decoration:underline; color:#0f9327}
.a1{text-decoration:underline; color:#b7f124}
.a1:hover{text-decoration:underline; color:#f8efae}
.f1{font-size:14px;}
.c1{color:#ff7200}
.c2{color:#FFFFFF}
.c3{color:#f8efae}
.c4{color:#32633b}
.c4{ color:#0F9327}
.ent_l{width:190px; height:325px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/tu_l.gif) no-repeat; float:left;}
.ent_c{width:342px; height:325px; background-color:#FFFFFF; float:left; overflow:hidden}
.bq{width:342px; height:71px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/bq_d.gif) no-repeat;}
.bq ul{padding:0px; margin:0px; list-style-type:none;}
.bq li{width:88px; height:23px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/bq_2.gif) 0px 1px no-repeat; padding-top:3px; margin-top:43px; text-align:center; float:left; cursor:pointer;}
.bq li a{font-size:12px; font-weight:bold; color:#59814c;}
.bq li a:hover{text-decoration:none;}
.bq li.on{background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/bq_1.gif) no-repeat top; color:#fff;}
.bq li.on a{color:#fff;}
.bq_d{width:100%; height:253px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/line_2.gif) right repeat-y; border-bottom:#0f9327 1px solid; text-align:left}
.bq_n{width:80%; padding-top:15px; text-align:center; margin-left:30px}
.bq_d .c4{ text-align:left}
.clear{ clear:both; font-size:0; height:0}
要是不行QQ:23116598我。
收起
热心网友
回答时间:2024-05-17 10:41
我帮你
编码中...
简洁易懂点的:
<html>
<head>
<title>DIV层切换</title>
<script>
function Cdiv(dId,dName,zdC)
{
for(i=0;i<=zdC;i++)
{
document.getElementById(dName+i).style.display="none";
}
document.getElementById(dName+dId).style.display="block";
}
</script>
</head>
<body>
<span onMouseMove="JavaScript:Cdiv('0','XDiv',2)" style="cursor:pointer;">栏目一</span>
<span onMouseMove="JavaScript:Cdiv('1','XDiv',2)" style="cursor:pointer;">栏目二</span>
<span onMouseMove="JavaScript:Cdiv('2','XDiv',2)" style="cursor:pointer;">栏目三</span>
<div id="BigDIV" style="border:solid 1px #cccccc;width:460px;margin:10px;">
<div id="XDiv0" style="font-size:14px;margin:10px;color:#FF0000;">第一部分<br></div>
<div id="XDiv1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">第二部分<br></div>
<div id="XDiv2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">第三部分</div>
</div>
</body>
</html>
要是回答的内容有问题,或认为不妥,请发送百度消息给我,消息内容加上本页网址哦。。
·
收起