【任务一】编写程序，实现如图1所示标签切换效果。
具体要求：
1. 界面效果如图1所示。
2. 当鼠标移动时，切换标签页。
界面截图：
源代码截图：
【任务二】编写程序，实现如图3所示效果。
具体要求：
- 当用户点击会员专区的“用户名”“手机号”或“邮箱”时，显示相应的表单；
- 当用户鼠标滑过“企业名片”“个人名片”时，显示相应的图片；
- 界面代码可以从老师提供的源代码中复制。
界面截图：
源代码：
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#content{position:relative;margin:0px auto;
font-size:12px;line-height:22px;width:900px;}
#main_left{margin-top:15px;}
#main_left,#main_center,#main_right{float:left;}
#main_left{width:200px;}
#login{border:2px solid blue;
-moz-border-radius:13px;
-webkit-border-radius:13px;border-radius:13px;text-align:center; height:230px;}
#login p{text-align:left;font-size:14px;font-weight:bold;}
#login a{display:block;padding:3px;margin-left:5px;float:left;border:1px solid gray;width:45px;margin-top:20px;}
#login #userName,#login #telDiv,#login #emailDiv{clear:both;margin-top:60px;}
#main_center{margin-left:10px;width:450px;}
#main_center_top{border:1px solid gray;height:30px;padding-top:10px;}
#main_center_top h4{font-weight:bold;color:#999999;float:left;}
#main_center_top h4 span{color:orange;}
#main_center_top form{float:right;}
#main_center_bottom{border:3px solid #aaa;margin-top:10px;height:250px;}
#main_center_bottom ul{clear:both;}
#main_center_bottom ul li{list-style:none;
width:130px;float:left;margin-left:10px;margin-top:10px;}
#main_center_bottom h4{float:left;}
#main_center_bottom #mp{float:right;}
#main_center_bottom #mp a{display:block;border:1px solid #ddd;margin-left:5px;padding:5px;float:left;}
</style>
<script type="text/javascript">
function unitDiv(){
document.getElementById("telDiv").style.display="none";
document.getElementById("emailDiv").style.display="none";
}
function show(du,dt,de){
document.getElementById(du).style.display="block";
document.getElementById(dt).style.display="none";
document.getElementById(de).style.display="none";
}
function unitMp(){
document.getElementById("gexing").style.display="none";
}
function showMp(show,hidden){
document.getElementById(show).style.display="block";
document.getElementById(hidden).style.display="none";
}
</script>
</head>
<body onload="unitDiv(),unitMp()">
<div id="content">
<div id="top">
</div>
<div id="nav">
</div>
<div id="main">
<div id="main_left">
<div id="login">
<p style="margin-top:10px;">会员专区</p>
<a href="#" id="user" onclick="show('userName','telDiv','emailDiv')">用户名</a>
<a href="#" id="tel" onclick="show('telDiv','userName','emailDiv')">手机号</a>
<a href="#" id="email" onclick="show('emailDiv','telDiv','userName')">邮箱</a>
<div id="userName">
<form>
用户名:<input type="text" size="10" /><br /><br />
密 码:<input type="text" size="10" />
</form>
</div>
<div id="telDiv">
<form>
手机号码:<input type="text" size="10" /><br /><br />
登录密码:<input type="text" size="10" />
</form>
</div>
<div id="emailDiv">
<form>
邮箱地址:<input type="text" size="10" /><br /><br />
邮箱密码:<input type="text" size="10" />
</form>
</div>
<p style="font-size:14px;text-align:center;margin-top:15px;"> 用户注册 忘记密码</p>
</div>
</div>
<div id="main_center">
<div id="main_center_bottom">
<h4>最新名片模板</h4>
<div id="mp">
<a href="#" onmouseover="showMp('qiye','gexing')">企业名片</a>
<a href="#" onmouseover="showMp('gexing','qiye')">个性名片</a>
</div>
<div id="qiye">
<ul>
<li><img src="image/img_b.jpg" /></li>
<li><img src="image/img_c.jpg" /></li>
<li><img src="image/img_d.jpg" /></li>
<li><img src="image/img_b.jpg" /></li>
<li><img src="image/img_c.jpg" /></li>
<li><img src="image/img_d.jpg" /></li>
</ul>
</div>
<div id="gexing">
<ul>
<li><img src="image/img_e.jpg" /></li>
<li><img src="image/img_e.jpg" /></li>
<li><img src="image/img_e.jpg" /></li>
<li><img src="image/img_e.jpg" /></li>
<li><img src="image/img_e.jpg" /></li>
<li><img src="image/img_e.jpg" /></li>
</ul>
</div>
</div>
</div>
<div id="main_right">
</div>
</div>
</div>
</body>
</html>