登录页面设计（二）

来源：互联网发布：国家数据保密协议编辑：程序博客网时间：2024/06/05 10:07
<!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>
效果图如下：
0 0