现在的位置: 首页 > 综合 > 正文

注册与登录界面的美化

2017年12月19日 ⁄ 综合 ⁄ 共 3677字 ⁄ 字号 小 中 大 ⁄ 评论关闭 
  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  4. <title>Form demo</title> 
  5. <style type="text/css"> 
  6. <!-- 
  7. body { 
  8.     font-family: Arial, Helvetica, sans-serif; 
  9.     font-size:12px; 
  10.     color:#666666; 
  11.     background:#fff; 
  12.     text-align:center; 
  13.  
  14. } 
  15.  
  16. * { 
  17.     margin:0; 
  18.     padding:0; 
  19. } 
  20.  
  21. a { 
  22.     color:#1E7ACE; 
  23.     text-decoration:none;     
  24. } 
  25.  
  26. a:hover { 
  27.     color:#000; 
  28.     text-decoration:underline; 
  29. } 
  30. h3 { 
  31.     font-size:14px; 
  32.     font-weight:bold; 
  33. } 
  34.  
  35. pre,p { 
  36.     color:#1E7ACE; 
  37.     margin:4px; 
  38. } 
  39. input, select,textarea { 
  40.     padding:1px; 
  41.     margin:2px; 
  42.     font-size:11px; 
  43. } 
  44. .buttom{ 
  45.     padding:1px 10px; 
  46.     font-size:12px; 
  47.     border:1px #1E7ACE solid; 
  48.     background:#D0F0FF; 
  49. } 
  50. #formwrapper { 
  51.     width:450px; 
  52.     margin:15px auto; 
  53.     padding:20px; 
  54.     text-align:left; 
  55.     border:1px #1E7ACE solid; 
  56. } 
  57.  
  58. fieldset { 
  59.     padding:10px; 
  60.     margin-top:5px; 
  61.     border:1px solid #1E7ACE; 
  62.     background:#fff; 
  63. } 
  64.  
  65. fieldset legend { 
  66.     color:#1E7ACE; 
  67.     font-weight:bold; 
  68.     padding:3px 20px 3px 20px; 
  69.     border:1px solid #1E7ACE;     
  70.     background:#fff; 
  71. } 
  72.  
  73. fieldset label { 
  74.     float:left; 
  75.     width:120px; 
  76.     text-align:right; 
  77.     padding:4px; 
  78.     margin:1px; 
  79. } 
  80.  
  81. fieldset div { 
  82.     clear:left; 
  83.     margin-bottom:2px; 
  84. } 
  85.  
  86. .enter{ text-align:center;} 
  87. .clear { 
  88.     clear:both; 
  89. } 
  90.  
  91. --> 
  92. </style> 
  93. </head> 
  94.  
  95. <body> 
  96. <div id="formwrapper"> 
  97.  
  98. <h3>已注册用户登录</h3> 
  99.     <form action="" method="post" name="apLogin" id="apLogin"> 
  100.     <fieldset> 
  101.         <legend>用户登录</legend> 
  102.         <div> 
  103.             <label for="Name">用户名</label> 
  104.             <input type="text" name="Name" id="Name" size="18" maxlength="30" /><br /> 
  105.         </div> 
  106.         <div> 
  107.             <label for="password">密码</label> 
  108.             <input type="password" name="password" id="password" size="18" maxlength="15" /><br /> 
  109.         </div> 
  110.         <div class="cookiechk"> 
  111.             <label><input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="选择是否记录您的信息">记住我</a></label> 
  112.             <input name="login791" type="submit" class="buttom" value="登录" /> 
  113.         </div>     
  114.         <div class="forgotpass"><a href="#">您忘记密码?</a></div>     
  115.     </fieldset> 
  116.     </form><br /> 
  117.     <h3>未注册创建帐户</h3> 
  118.     <form action="" method="post" name="apForm" id="apForm"> 
  119.     <fieldset> 
  120.         <legend>用户注册</legend> 
  121.         <p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong> 在您注册之前请先认真阅读服务条款.</p> 
  122.         <div> 
  123.         <label for="Name">用户名</label> 
  124.         <input type="text" name="Name" id="Name" value="" size="20" maxlength="30" />  
  125.         *(最多30个字符)<br />     
  126.     </div> 
  127.         <div> 
  128.         <label for="Email">电子邮箱</label> 
  129.         <input type="text" name="Email" id="Email" value="" size="20" maxlength="150" /> *<br />     
  130.     </div>     
  131.         <div> 
  132.         <label for="password">密码</label> 
  133.         <input type="password" name="password" id="password" size="18" maxlength="15" />  
  134.         *(最多15个字符)<br /> 
  135.     </div> 
  136.         <div> 
  137.         <label for="confirm_password">重复密码</label> 
  138.         <input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" />  
  139.         *<br /> 
  140.  
  141.     </div> 
  142.         <div> 
  143.         <label for="AgreeToTerms">同意服务条款</label> 
  144.             <input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />  
  145.             <a href="#" title="您是否同意服务条款">先看看条款？</a> *    </div>         
  146.         <div class="enter"> 
  147.         <input name="create791" type="submit" class="buttom" value="提交" /> 
  148.         <input name="Submit" type="reset" class="buttom" value="重置" /> 
  149.     </div> 
  150.  
  151.         <p><strong>* 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.<br />  
  152.         * 这些条款可能在未经您同意的时候进行修改.</strong></p>     
  153.     </fieldset> 
  154.     </form> 
  155. </div> 
  156. </body> 
  157. </html> 

 

 

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞