新增-微信绑定.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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. <title>注册信息</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
  7. <style>
  8. html{ font-size:62.5%; }
  9. body{ background-color:#F4F4F4; position:relative; }
  10. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,textarea{margin:0;padding:0;border:0;font-size:100%; font-weight:normal; font-style:normal; vertical-align:baseline; font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;}
  11. article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
  12. body{line-height:1;max-width:640px;min-width:320px;margin:0 auto !important}
  13. ol,ul{list-style:none}
  14. blockquote,q{quotes:none}
  15. blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
  16. table{border-collapse:collapse;border-spacing:0}*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
  17. html,body{width:100%; height:100%; }
  18. ::-webkit-input-placeholder { /* WebKit browsers */
  19. color:#CCC; font-size:1rem;
  20. }
  21. :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  22. color:#CCC; font-size:1rem;
  23. }
  24. ::-moz-placeholder { /* Mozilla Firefox 19+ */
  25. color:#CCC; font-size:1rem;
  26. }
  27. :-ms-input-placeholder { /* Internet Explorer 10+ */
  28. color:#CCC; font-size:1rem;
  29. }
  30. .reg_bg{ width:100%; height:160px; background-image:linear-gradient(to bottom right, #F4E1E1, #65D8EB); }
  31. .box{ width:100%; height:100%; position:absolute; left:0; top:0; }
  32. .reg{ margin:20px 15px; }
  33. .reg .header{ height:34px; }
  34. .reg .header img{ height:34px; }
  35. .txt_box{ padding:0 15px; overflow:hidden; margin-top:20px; background-color:#FFF; border-radius:6px; }
  36. .txt_box .txt{ width:100%; height:30px; font-size:1rem; line-height:30px; margin:15px 0; border:none; padding:0; }
  37. .txt_box .line{ width:100%; height:.5px; background-color:#DDD; }
  38. .fs{ text-align:right; font-size:1rem; color:#999; margin-top:40px; }
  39. .next{ width:100%; height:50px; margin-top:20px; background-color:#5ACEE3; color:#FFF; line-height:50px; border-radius:6px; text-align:center; border:none; font-size:1rem; }
  40. </style>
  41. <script type="text/javascript">
  42. function setTab ( i )
  43. {
  44. selectTab(i);
  45. }
  46. function selectTab ( i )
  47. {
  48. switch(i){
  49. case 1:
  50. document.getElementById("TabCon1").style.display="block";
  51. document.getElementById("TabCon2").style.display="none";
  52. break;
  53. case 2:
  54. document.getElementById("TabCon1").style.display="none";
  55. document.getElementById("TabCon2").style.display="block";
  56. break;
  57. }
  58. }
  59. </script>
  60. </head>
  61. <body>
  62. <div class="reg_bg"></div>
  63. <div class="box">
  64. <div class="reg">
  65. <form>
  66. <div id="TabCon1">
  67. <div class="header"><img src="logo.png" /></div>
  68. <div class="txt_box">
  69. <input name="" type="text" class="txt" autofocus="autofocus" placeholder="用户名(6~18位字符,字母、数字、下划线)" />
  70. <div class="line"></div>
  71. <input name="" type="password" class="txt" placeholder="密码(6~16个字符,区分大小写)" />
  72. <div class="line"></div>
  73. <input name="" type="tel" class="txt" placeholder="手机号码" />
  74. </div>
  75. <div id="font2" class="tab2 next" onClick="setTab(2);">提交</div>
  76. </div>
  77. <div id="TabCon2" style="display:none">
  78. <div id="font1" class="header"><img src="return.png" class="tab1" onClick="setTab(1);" /></div>
  79. <div class="txt_box">
  80. <input name="" type="text" class="txt" placeholder="请输入验证码" />
  81. </div>
  82. <div class="fs">59s<!--倒计时60s后文案——点此重新发送--></div>
  83. <button class="next">完成</button>
  84. </div>
  85. </form>
  86. </div>
  87. </div>
  88. </body>
  89. </html>