<!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>
<script src="../../js/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 隐藏tab2
$("table#tab2").hide();
$("input#a").click(function(){
$("table#tab3").show();
$("table#tab2").hide();
});
$("input#b").click(function(){
$("table#tab2").show();
$("table#tab3").hide();
});
});
</script>
<style type="text/css">
tr{
height:40px;
}
.header{
height:100px;
width:100%;
}
.center{
height:500px;
width:100%;
}
.left{
float:left;
height:500px;
width:49%;
}
.right{
float:right;
height:500px;
position:relative;
text-align:center;
font-size:14px;
margin-right:15%;
border:#D8E8F8 2px solid;
}
.foot{
text-align:center;
padding:5px;
font-size:14px;
height:100px;
}
.tab1{
height:200px;
}
.tab2{
margin:15px;
height:200px;
}
.tab3{
margin:15px;
height:200px;
}
</style>
</head>
<body>
<div id="header" class="header">
<img src="../../images/携程1.jpg" style="margin-left:25%;" />
</div>
<div id="center" class="center">
<div id="left" class="left"><img src="../../images/携程2.jpg" style="margin-left:25%;"/></div>
<div id="right" class="right">
<form metdod="post" action="" style="margin:25px;">
<table id="tab1">
<tr style="border-bottom:#D8E8F8 1px solid;">
<td align="left">会员登录</td>
<td colspan="2" ><a href="1.html">立即注册</a>，享积分换礼、返现等专属优惠！</td>
<td></td>
</tr>
<tr>
<td colspan="3" align="center">
<input id="a" type="radio" name="denglu" value="普通登录" />普通登录
<input id="b" type="radio" name="denglu" value="手机动态密码登录"/>手机动态密码登录</td> <td></td> <td></td>
</tr>
</table>
<table id="tab2">
<tr>
<td>手机号</td>
<td>
<input id="c" type="text" class="input" value="请输入注册手机号"/></td>
<td></td>
</tr>
<tr>
<td>验证码</td>
<td><input id="d" type="text" name="password"b class="input" value="不区分大小写"/></td>
<td><img src="../../images/验证码.png" style="height:20px; widtd:80%; "/></td>
</tr>
<tr>
<td>密 码</td>
<td><input id="e" type="text" name="password"b class="input" value="请输入6-20位密码"/></td>
<td><input id="f" type="submit" value="发送动态密码"/></td>
</tr>
<tr>
<td colspan="3" align="center">
<input id="i" type="checkbox" name="save" value="30天内自动登录"/>30天内自动登录</td>
<td></td> <td></td>
</tr>
<tr>
<td colspan="3">
<input id="j" type="submit" value="登录" align="center" style="color:#FFF; cursor:pointer; background-color:#FF0;"/></td>
<td></td>
<td></td>
</tr>
</table>
<table id="tab3">
<tr>
<td>登录名</td>
<td>
<input id="g" type="text" class="input" value="用户名/卡号/手机号/邮箱"/></td>
<td></td>
</tr>
<tr>
<td>密 码</td>
<td><input id="h" type="text" name="password"b class="input" value="请输入6-20位密码"/></td>
<td><a href="">忘记密码？</a></td>
</tr>
<tr>
<td colspan="3" align="center">
<input id="i" type="checkbox" name="save" value="30天内自动登录"/>30天内自动登录</td>
<td></td> <td></td>
</tr>
<tr>
<td colspan="3">
<input id="j" type="submit" value="登录" align="center" style="color:#FFF; cursor:pointer;text-shadow:#F60 1px ;background-color:#F60;width:220px;height:42px; margin-bottom: 8px; font-size: 18px;font-family: "Microsoft YaHei",SimSun,Tahoma,Verdana,Arial, sans-serif;"/></td> <td></td> <td></td>
</tr>
</table>
</form>
</div>
</div>
<div id="foot" class="foot">
<p>
<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>
</p>
<p>
<a href="">Copyright@</a>1900-2016, <a href="">ctrip.com</a>. all rights reserved.</p>
</div>
</body>
</html>
效果图如下：
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
