效果图如下：
源码如下：
<!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" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>ITeye - Java编程 Hibernate Spring AJAX Agile 敏捷软件开发 ruby on rails - 做最棒的软件开发交流社区</title>
<meta name="description" content="Java编程,Spring Struts Webwork框架深入,XMLHTTP AJAX开发,Java Web开发,Java企业应用,Java设计模式,Java开源框架,Java应用服务器,Rich Client讨论,Ruby编程,Ruby DSL开发,Ruby on rails实践,JavaScript编程,敏捷软件开发XP TDD,软件配置管理,软件测试,项目管理UML,数据库,C#/.net C/C++ Erlang/FP PHP/Linux平台,精通Hibernate" />
<meta name="keywords" content="Java编程 Spring框架 AJAX技术 Agile敏捷软件开发 ruby on rails实践 软件工程 讨论 论坛 ITeye深度技术社区" />
<link href="css/forum.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/passport.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="content" class="clearfix">
<div id="main">
<div id="wrap">
<div class="passport">
<div class="login">
<ul id="tags" class="tab">
<li class="selectTag"><a onClick="selectTag('tagContent0',this)" href="javascript:void(0)">ITeye账号登录</a></li>
<li ><a onClick="selectTag('tagContent1',this)" href="javascript:void(0)">CSDN账号登录</a></li>
</ul>
<div id="tagContent">
<div class="tagContent selectTag" id="tagContent0" >
<!--ITeye form tab-->
<form action="/login" id="login_form" method="post"> <table border="0" cellspacing="0" cellpadding="0" class="table_1">
<colgroup><col width="60" /><col /></colgroup>
<tr>
<th>账号</th>
<td>
<input class="input_1" id="user_name" name="name" placeholder="用户名或邮箱" tabindex="1" type="text" value="" />
</td>
</tr>
<tr>
<th>密码</th>
<td>
<input class="input_1" id="password" name="password" tabindex="2" type="password" value="" /></td>
</tr>
<tr>
<th> </th>
<td>
<input id="auto" name="remember_me" tabindex="3" type="checkbox" value="1" />
<label for="auto">下次自动登录</label>
<a href="/users/forget">忘记密码？</a>
</td>
</tr>
<tr>
<th> </th>
<td><input type="submit" name="button" id="button" value="登 录" class="btn_1" tabindex="4" /></td>
</tr>
</table>
</form>
</div>
<div class="tagContent" id="tagContent1" style="display:none;">
<!--CSDN form tab-->
<form action="/auth/csdn" id="csdn_form" method="post">
<table border="0" cellspacing="0" cellpadding="0" class="table_1">
<colgroup><col width="100" /><col /></colgroup>
<tr>
<th>CSDN账号</th>
<td><input class="input_1" id="name" name="name" placeholder="用户名或邮箱" tabindex="1" type="text" /></td>
</tr>
<tr>
<th>CSDN密码</th>
<td><input class="input_1" id="password" name="password" tabindex="2" type="password" value="" /></td>
</tr>
<tr>
<th> </th>
<td><input type="submit" name="button" id="button" value="登 录" class="btn_1" tabindex="4" /></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<script type=text/javascript>
function selectTag(showContent,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
源码免费下载地址：http://download.csdn.net/detail/xuweilinjijis/5161142