login.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用户登录</title>
  6. <style>
  7. #container {
  8. width: 400px;
  9. margin: 10px auto;
  10. }
  11. .input, form+a {
  12. margin: 20px 20px;
  13. width: 250px;
  14. }
  15. .input>label {
  16. display: inline-block;
  17. width: 70px;
  18. text-align: right;
  19. }
  20. .input:last-child {
  21. text-align: center;
  22. }
  23. input[type=text], input[type=password] {
  24. outline: none;
  25. }
  26. input[type=submit], input[type=reset] {
  27. width: 60px;
  28. }
  29. form+a {
  30. text-decoration: none;
  31. color: blue;
  32. }
  33. .captcha {
  34. width: 380px;
  35. }
  36. .captcha>img {
  37. vertical-align: middle;
  38. }
  39. .hint {
  40. margin-left: 20px;
  41. color: red;
  42. font-size: 0.8em;
  43. height: 20px;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div id="container">
  49. <h1>用户登录</h1>
  50. <hr>
  51. <form action="" method="post">
  52. <div class="input">
  53. <label>用户名:</label>
  54. <input type="text" name="username">
  55. </div>
  56. <div class="input">
  57. <label>密码:</label>
  58. <input type="password" name="password">
  59. </div>
  60. <div class="input captcha">
  61. <label>验证码:</label>
  62. <input type="text" name="captcha">
  63. <img id="code" src="images/captcha.jpg" width="120">
  64. </div>
  65. <div class="input">
  66. <input type="submit" value="登录">
  67. <input type="reset" value="重置">
  68. </div>
  69. </form>
  70. <a href="register.html">注册新用户</a>
  71. </div>
  72. </body>
  73. </html>