form_and_table.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="description" content="" />
  6. <title>用户登录</title>
  7. <style>
  8. body {
  9. width: 90%;
  10. margin: 0 auto;
  11. font-size: 16px;
  12. }
  13. #login {
  14. width: 290px;
  15. margin: 20px auto;
  16. }
  17. #login fieldset {
  18. border-radius: 5px;
  19. }
  20. #login legend {
  21. background-color: lightgray;
  22. padding: 2px 15px;
  23. border-radius: 5px;
  24. }
  25. #login span {
  26. display: inline-block;
  27. width: 60px;
  28. text-align: right;
  29. }
  30. #login input {
  31. margin: 12px 5px;
  32. border: none;
  33. }
  34. #login input[name^="user"] {
  35. width: 175px;
  36. outline: none;
  37. border-bottom: 1px dotted darkgray;
  38. }
  39. #login input[type="submit"] {
  40. margin-left: 195px;
  41. color: white;
  42. background-color: chocolate;
  43. border-radius: 5px;
  44. }
  45. #login input[type="submit"]:hover {
  46. background-color: darkgreen;
  47. cursor: pointer;
  48. }
  49. #data {
  50. margin: 10px auto;
  51. border-collapse: collapse;
  52. }
  53. #data td {
  54. border-bottom: 1px solid gray;
  55. border-right: 1px solid gray;
  56. width: 160px;
  57. height: 60px;
  58. }
  59. #data td.tl {
  60. border-top-left-radius: 10px;
  61. }
  62. #data td.tr {
  63. border-top-right-radius: 10px;
  64. }
  65. #data td.bl {
  66. border-bottom-left-radius: 10px;
  67. }
  68. #data td.br {
  69. border-bottom-right-radius: 10px;
  70. }
  71. #data td.last {
  72. border-right: none;
  73. }
  74. #data td.first {
  75. width: 250px;
  76. padding-left: 10px;
  77. }
  78. #data td.center {
  79. color: white;
  80. text-align: center;
  81. }
  82. #data td.bottom {
  83. border-bottom: none;
  84. }
  85. #data tr.head {
  86. background-color:lightblue;
  87. }
  88. #data tr.odd {
  89. background-color: beige;
  90. }
  91. #data tr.even {
  92. background-color: blanchedalmond;
  93. }
  94. </style>
  95. </head>
  96. <body>
  97. <form id="login" action="" method="post">
  98. <fieldset>
  99. <legend>用户登录</legend>
  100. <span>用户名: </span>
  101. <input type="text" name="username" required>
  102. <span>密码: </span>
  103. <input type="password" name="userpass" required>
  104. <span>邮箱: </span>
  105. <input type="email" name="useremail" required>
  106. <input type="submit" value="登录" />
  107. </fieldset>
  108. </form>
  109. <table id="data">
  110. <tr class="head">
  111. <td class="tl first"></td>
  112. <td class="center">成都</td>
  113. <td class="center">北京</td>
  114. <td class="tr center last">杭州</td>
  115. </tr>
  116. <tr class="odd">
  117. <td class="first">Python从入门到住院全国巡演</td>
  118. <td class="after">2018年2月28日 上午9:30</td>
  119. <td class="after">2018年3月28日 上午9:30</td>
  120. <td class="last">2018年4月28日 上午9:30</td>
  121. </tr>
  122. <tr class="even">
  123. <td class="first">MySQL从删库到跑路公开课</td>
  124. <td>2018年2月27日 上午9:30</td>
  125. <td>2018年3月5日 上午9:30</td>
  126. <td class="last">2018年4月2日 上午9:30</td>
  127. </tr>
  128. <tr class="odd">
  129. <td class="first">Django从学习到上吊交流会</td>
  130. <td>2018年2月28日 上午9:30</td>
  131. <td></td>
  132. <td class="last">2018年5月21日 上午9:30</td>
  133. </tr>
  134. <tr class="even">
  135. <td class="first bottom bl">爬虫从精通到坐牢无遮大会</td>
  136. <td class="bottom">2018年3月3日 上午9:30</td>
  137. <td class="bottom">2018年4月17日 上午9:30</td>
  138. <td class="last bottom br">2018年1月15日 上午9:30</td>
  139. </tr>
  140. </table>
  141. </body>
  142. </html>