1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title>登陆界面</title>
  6. <style type="text/css">
  7. * {
  8. margin:0;
  9. padding:0;
  10. font-size:12px;
  11. font-weight:normal;
  12. font-family:verdana, tahoma, helvetica, arial, sans-serif, "宋体";
  13. font-style:normal;
  14. list-style-type:none;
  15. text-decoration:none;
  16. }
  17. div#body input#fnbtn {
  18. width:78px;
  19. height:39px;
  20. border:none;
  21. cursor:pointer;
  22. position:absolute;
  23. top:40px;
  24. left:100px;
  25. background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -70px no-repeat;
  26. }
  27. div#mask {
  28. position:absolute;
  29. top:0;
  30. left:0;
  31. background:#fff;
  32. filter:alpha(opacity=60);
  33. -moz-opacity:0.2;
  34. z-index:100;
  35. }
  36. div#login {
  37. position:absolute;
  38. top:75px;
  39. left:100px;
  40. width:293px;
  41. z-index:200;
  42. }
  43. div#login h2 {
  44. height:26px;
  45. padding-top:3px;
  46. padding-left:25px;
  47. background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') -84px -70px no-repeat;
  48. }
  49. div#login h2 input {
  50. height:18px;
  51. width:18px;
  52. float:right;
  53. border:none;
  54. cursor:pointer;
  55. margin:2px 6px 0 0;
  56. background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -169px no-repeat;
  57. }
  58. div#login h2 a {
  59. display:block;
  60. float:left;
  61. width:83px;
  62. height:26px;
  63. line-height:26px;
  64. text-align:center;
  65. text-decoration:none;
  66. color:#666;
  67. }
  68. div#login h2 a.cur {
  69. color:#f00;
  70. background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -187px no-repeat;
  71. }
  72. div#login ul {
  73. padding:14px 0 18px 12px;
  74. background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') -84px bottom no-repeat;
  75. }
  76. div#login ul li {
  77. padding-left:60px;
  78. margin-top:10px;
  79. display:inline-block;
  80. }
  81. div#login ul li {
  82. display:block;
  83. }
  84. div#login ul li:after {
  85. content:"youdian";
  86. clear:both;
  87. display:block;
  88. height:0;
  89. visibility:hidden;
  90. }
  91. div#login ul li tt {
  92. float:left;
  93. width:60px;
  94. margin-left:-70px;
  95. text-align:right;
  96. line-height:22px;
  97. color:#444;
  98. }
  99. div#login ul li div input.cell, div#login ul li div input.cell2 {
  100. height:16px;
  101. padding:2px;
  102. line-height:16px;
  103. width:179px;
  104. border:1px #dcdcdc solid;
  105. color:#666;
  106. }
  107. div#login ul li div input.cell2 {
  108. width:50px;
  109. }
  110. div#login ul li div label {
  111. color:#666;
  112. cursor:pointer;
  113. }
  114. div#login ul li div img {
  115. margin-bottom:-7px;
  116. margin-left:8px;
  117. }
  118. * html div#login ul li div img {
  119. margin-bottom:-4px;
  120. }
  121. *+html div#login ul li div img {
  122. margin-bottom:-4px;
  123. }
  124. div#login ul li div input#fnlogin {
  125. width:59px;
  126. height:21px;
  127. cursor:pointer;
  128. border:none;
  129. margin-right:15px;
  130. background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -148px no-repeat;
  131. }
  132. div#login ul li p {
  133. padding-top:4px;
  134. color:#f00;
  135. }
  136. </style>
  137. </head>
  138. <body>
  139. <div id="body">
  140. <input id="fnbtn" type="button" title="" />
  141. </div><div id="mask" style="display:none;"></div>
  142. <div id="login" style="display:none;">
  143. <h2><input id="fnquit" type="button" title="退出登录" /><a href="#" class="cur" name="Email">Email登录</a><a href="#" name="用户名">用户名登录</a></h2>
  144. <ul><form id="LoginForm" name="LoginForm" action="http://www.lanrentuku.com/"  method="post" enctype="multipart/form-data" ><li><input id="loginType" name="loginType" type="hidden"/><tt><label id="logtype" for="email">Email:</label></tt><div><input id="username" name="username" type="text" class="cell" onKeyPress="return checkSubmit(event)"/></div></li>
  145. <li><tt><label for="password">密 码:</label></tt><div><input id="password" name="password" type="password" class="cell" onKeyPress="return checkSubmit(event)" /></div></li><li><tt></tt>
  146. <div><input id="reme" name="rememberme" type="checkbox" /> <label for="reme">下次自动登录</label></div></li>
  147. <li><tt></tt> <div><input id="fnlogin" type="button"/><a href="http://www.lanrentuku.com/" target="_blank" onclick="return checkForgetPassword()">忘记密码?</a></div></li>
  148. </form></ul>
  149. </div>
  150. <script type="text/javascript">
  151. function g(obj) {
  152. return document.getElementById(obj);
  153. }
  154. var login = {
  155. title:null,
  156. show:function(){
  157. var sWidth,sHeight;
  158. sWidth = screen.width;
  159. sWidth = document.body.offsetWidth;
  160. sHeight=document.body.offsetHeight;
  161. if (sHeight<screen.height){sHeight=screen.height;}
  162. g("mask").style.width = sWidth + "px";
  163. g("mask").style.height = sHeight + "px";
  164. g("mask").style.display = "block";
  165. g("login").style.display = "block";
  166. g("login").style.right = g("body").offsetLeft + "px";
  167. //                window.status = g("body").offsetLeft;
  168. },
  169. hide:function(){
  170. g("mask").style.display = "none";
  171. g("login").style.display = "none";
  172. }
  173. }
  174. g("fnbtn").onclick = function(){
  175. login.show();
  176. this.blur();
  177. this.style.backgroundPosition = "0 -109px";
  178. };
  179. g("fnlogin").onclick = function() {
  180. // The following 5 lines of code is used to get the login type & pass to the form
  181. // One More line of code is insert to root_index.jsp to capture the hidden value
  182. if (document.getElementById("logtype").innerHTML == "Email:") {
  183. document.getElementById('loginType').value = 'email';
  184. } else {
  185. document.getElementById('loginType').value = 'mobile';
  186. }
  187. document.LoginForm.submit();
  188. };
  189. g("fnquit").onclick = function(){login.hide();g("fnbtn").style.backgroundPosition = "0 -70px";};
  190. var aa = g("login").getElementsByTagName("a");
  191. var aTab = new Array();
  192. for(var i=0; i<aa.length; i++){
  193. if(aa[i].parentNode.nodeName == "H2"){
  194. aTab.push(aa[i]);
  195. }
  196. }
  197. for(var j=0; j<aTab.length; j++){
  198. aTab[j].onclick = function(){
  199. this.blur();
  200. if (this.className != "cur"){
  201. for(var k=0; k<aTab.length; k++){aTab[k].className = ""};
  202. this.className = "cur"
  203. g("logtype").innerHTML = this.name + ":";
  204. }
  205. }
  206. }
  207. </script>
  208. <script language="javascript">
  209. login.hide();
  210. </script>
  211. </body>
  212. </html>

650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/attachment/201203/110140921.png" />

可选择Email和用户名登录的代码的更多相关文章

  1. 在某网站的登录页面登录时如果选择“记住用户名”,登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页面中存在一个超链接,单击超链接可以链接到第三个页面查看信息。若选择“

    Response实现登录并记录用户名和密码信息 在某网站的登录页面登录时如果选择"记住用户名",登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页 ...

  2. git 指定用户名密码更新代码

    使用git 更新代码 如何修改git 的密码一直令人费解,百度一堆也没给出答案.下面给一种替代方案. 例如:我们正常的代码地址 http://172.16.210.112/project/test.g ...

  3. PHP简单登录退出代码

    PHP简单登录退出代码 登录页面login.html 负责收集用户填写的登录信息.  <html> <head> <title></title> < ...

  4. laravel 用户名登录

    laravel 用户名登录 默认登录设置为用户登录 laravel 5.3+ 修改文件(app\Http\Controllers\Auth\LoginController.php)增加 public ...

  5. asp.net ajax 检测用户名是否可用代码

    原文  asp.net ajax 检测用户名是否可用代码 .net ajax 检测用户名是否可用代码 <script type="text/网页特效" src="c ...

  6. asp.net ajax检查用户名是否存在代码

    原文  asp.net ajax检查用户名是否存在代码 用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web ...

  7. sp_change_users_login 'Update_One', '用户名', '登录名';

    每次从服务器上备份好数据库(Sql Server数据库),如果将备份数据库文件在本地恢复,总会产生用户权限的问题. 经过很多次的实验后,我发现有那么一条语句可以发挥作用,就是sp_change_use ...

  8. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  9. Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释

    前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...

随机推荐

  1. CSS 动画之九-会呼吸的信封

    新年已经到来,各个网站都举办着各种不同类型的活动,'会呼吸的信封'有可能就是你遇到的其中一种.其实就是一个信封的样式,在封口处加上开合开合的动画效果,吸引用户去打开这个信封,点击后可能会送红包,优惠券 ...

  2. Javascript跨域问题总结

    疯狂的JSONP 关于JSON与JSONP简单总结 window.name实现的跨域数据传输 JavaScript跨域总结与解决办法 flash跨域策略文件crossdomain.xml配置详解

  3. 问卷调查——答卷

    1.你对自己的未来有什么规划?做了哪些准备?答:对未来的规划,就是像大多数人一样,在学校里有一个好的成绩,掌握扎实的专业基础,然后在国考上得到一个好成绩,得到一个好的工作机会,然后努力工作.目标很简单 ...

  4. WebStorm在Mac上的快捷键(部分)

    整理一下在Mac上使用WS这款IDE的快捷键 shift + Enter 软回车 ,无论在前一行代码的什么位置,都能定位到下一行. command 显示/隐藏 左侧面板 command + b / 点 ...

  5. PHP Yii2.0(一):环境搭建 & 问题集锦

    第一节 简单认识版本的异同 (1)版本说明 在安装和使用之前,我们需要知道 PHP Yii 有两个不同的版本(Yii 1.*或者Yii 2.*),这两个版本的目录结构不一样,其具体使用方式差异较大,因 ...

  6. 初识Groovy

    Groovy是一种基于JVM(Java虚拟机)的敏捷开发语言,它结合了Python.Ruby和Smalltalk的许多强大的特性,Groovy 代码能够与 Java 代码很好地结合,也能用于扩展现有代 ...

  7. 『片段』C# DateTime 时间相减 和 时区的关系

    本文只是基础代码片段,直接先写 结论: C# DateTime 时间相减 —— 和 时区无关,只和时间值有关. 运行结果: 测试代码: using System; using System.Colle ...

  8. php 接收表单 方法的区别

    在php中用于接收表单数据的方法有$_REQUEST.$_POST和$_GET.他们作用都是类似的,下面来看一下他们的区别. 一.$_REQUEST能够用于接收post与get方法提交的数据,但是$_ ...

  9. Ztree异步加载自动展开节点

    在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况 ...

  10. 深入理解C#泛型

    前面两篇文章介绍了C#泛型的基本知识和特性,下面我们看看泛型是怎么工作的,了解一下泛型内部机制. 泛型内部机制 泛型拥有类型参数,通过类型参数可以提供"参数化"的类型,事实上,泛型 ...