zoukankan      html  css  js  c++  java

  • 可选择Email和用户名登录的代码

    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.         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.         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.         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.         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.         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.         179px; 
    104.         border:1px #dcdcdc solid; 
    105.         color:#666; 
    106. } 
    107. div#login ul li div input.cell2 { 
    108.         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.         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.                  
    168. //                window.status = g("body").offsetLeft; 
    169.         }, 
    170.         hide:function(){ 
    171.                 g("mask").style.display = "none"; 
    172.                 g("login").style.display = "none"; 
    173.         } 
    174. } 
    175. g("fnbtn").onclick = function(){ 
    176.         login.show(); 
    177.         this.blur(); 
    178.         this.style.backgroundPosition = "0 -109px"; 
    179. }; 
    180. g("fnlogin").onclick = function() { 
    181.     // The following 5 lines of code is used to get the login type & pass to the form 
    182.     // One More line of code is insert to root_index.jsp to capture the hidden value 
    183.     if (document.getElementById("logtype").innerHTML == "Email:") { 
    184.         document.getElementById('loginType').value = 'email'; 
    185.     } else { 
    186.         document.getElementById('loginType').value = 'mobile';    
    187.     } 
    188.     document.LoginForm.submit(); 
    189. }; 
    190. g("fnquit").onclick = function(){login.hide();g("fnbtn").style.backgroundPosition = "0 -70px";}; 
    191. var aa = g("login").getElementsByTagName("a"); 
    192. var aTab = new Array(); 
    193. for(var i=0; i<aa.length; i++){ 
    194.         if(aa[i].parentNode.nodeName == "H2"){ 
    195.                 aTab.push(aa[i]); 
    196.         } 
    197. } 
    198. for(var j=0; j<aTab.length; j++){ 
    199.         aTab[j].onclick = function(){ 
    200.                 this.blur(); 
    201.                 if (this.className != "cur"){ 
    202.                         for(var k=0; k<aTab.length; k++){aTab[k].className = ""}; 
    203.                         this.className = "cur" 
    204.                         g("logtype").innerHTML = this.name + ":"; 
    205.         } 
    206.         } 
    207. } 
    208. </script> 
    209. <script language="javascript"> 
    210. login.hide(); 
    211. </script> 
    212.  
    213. </body> 
    214. </html> 
  • 相关阅读:
    洛谷P2522 [HAOI2011]Problem b（莫比乌斯反演）
    洛谷P3327 [SDOI2015]约数个数和（莫比乌斯反演）
    Informatica PowerCenter 常用转换组件一览表
    Informatica_(3)组件
    Informatica_(2)第一个例子
    Informatica_(1)安装
    InformaticaPowerCenter调用存储过程
    Informatica 9.5.1 安装配置
    Linux字符集的查看及修改
    Redis-3.2.9集群配置（redis cluster）
  • 原文地址：https://www.cnblogs.com/umgsai/p/3908170.html
Copyright © 2011-2022 走看看