欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

表格课程表/表单登录

程序员文章站 2022-05-26 12:44:37
...

课程表

表格课程表/表单登录

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>课程表</title>
    8. 

  8. <style>
    9. 

  9. table{
    10. 

  10.     margin: 0 auto;
    11. 

  11.     text-align:center;
    12. 

  12.     border-collapse: collapse;
    13. 

  13. }
    14. 

  14. table th,td {
    15. 

  15.     border: 1px solid #e7ecf1;
    16. 

  16.     padding:10px;
    17. 

  17. }
    18. 

  18. </style>
    19. 

  19. </head>
    20. 

  20. <body>
    21. 

  21.     <table>
    22. 

  22.       <caption>
    23. 

  23.         <h3>课程表</h3>
    24. 

  24.       </caption>
    25. 

  25.       <thead>
    26. 

  26.         <tr>
    27. 

  27.           <th>时间</th>
    28. 

  28.           <th>星期一</th>
    29. 

  29.           <th>星期二</th>
    30. 

  30.           <th>星期三</th>
    31. 

  31.           <th>星期四</th>
    32. 

  32.           <th>星期五</th>
    33. 

  33.           <th>星期六</th>
    34. 

  34.           <th>星期日</th>
    35. 

  35.         </tr>
    36. 

  36.       </thead>
    37. 

  37.       </tobody>
    38. 

  38.         <tr>
    39. 

  39.             <td colspan="8" >上午</td>
    40. 

  40.         </tr>
    41. 

  41.         <tr>
    42. 

  42.             <td>一</td>
    43. 

  43.             <td>英语</td>
    44. 

  44.             <td>语文</td>
    45. 

  45.             <td>美术</td>
    46. 

  46.             <td>文体活动</td>
    47. 

  47.             <td>品德与生活</td>
    48. 

  48.             <td rowspan="3" >加班</td>
    49. 

  49.             <td rowspan="3">加班</td>
    50. 

  50.         </tr>
    51. 

  51.         <tr>
    52. 

  52.             <td>二</td>
    53. 

  53.             <td>英语</td>
    54. 

  54.             <td>语文</td>
    55. 

  55.             <td>美术</td>
    56. 

  56.             <td>文体活动</td>
    57. 

  57.             <td>品德与生活</td>
    58. 

  58.         </tr>
    59. 

  59.         <tr>
    60. 

  60.             <td>三</td>
    61. 

  61.             <td>英语</td>
    62. 

  62.             <td>语文</td>
    63. 

  63.             <td>美术</td>
    64. 

  64.             <td>文体活动</td>
    65. 

  65.             <td>品德与生活</td>
    66. 

  66.         </tr>
    67. 

  67.       </tbody>
    68. 

  68.     </table>
    69. 

    70. 

  70. </body>
    71. 

  71. </html>
    72.

登录

表格课程表/表单登录

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>登录</title>
    8. 

  8. <style>
    9. 

  9. .content{
    10. 

  10.     text-align: center;
    11. 

  11.     padding-top: 150px;
    12. 

  12.     width:500px;
    13. 

  13.     margin:0 auto;
    14. 

  14. }
    15. 

  15. .form-group{
    16. 

  16.     padding:10px 0;
    17. 

  17. }
    18. 

  18. input{
    19. 

  19.     width: 98%;
    20. 

  20.     height: 34px;
    21. 

  21.     padding: 1%;
    22. 

  22.     background-color: #fff;
    23. 

  23.     border: 1px solid #E4E6EF;
    24. 

  24.     color: #3F4254;
    25. 

  25.     background-clip: padding-box;
    26. 

  26.     border-radius: 4px;
    27. 

  27. }
    28. 

  28. button{
    29. 

  29.     width: 100%;
    30. 

  30.     margin-bottom: 0;
    31. 

  31.     font-weight: 400;
    32. 

  32.     text-align: center;
    33. 

  33.     cursor: pointer;
    34. 

  34.     border: 1px solid transparent;
    35. 

  35.     padding: 12px;
    36. 

  36.     font-size: 14px;
    37. 

  37.     border-radius: 4px;
    38. 

  38. }
    39. 

  39. </style>
    40. 

  40. </head>
    41. 

  41. <body>
    42. 

  42.     <div class="content">
    43. 

  43.         <form class="form" action="" method="post">
    44. 

  44.             <div class="form-group">
    45. 

  45.                 <input class="input" type="text" value="" placeholder="账号" name="username">
    46. 

  46.             </div>
    47. 

  47.             <div class="form-group">
    48. 

  48.                 <input class="input" type="text" value="" placeholder="密码" name="password">
    49. 

  49.             </div>
    50. 

  50.             <div class="submit">
    51. 

  51.                 <button type="submit"> 登录后台 </button>
    52. 

  52.             </div>
    53. 

  53.         </form>
    54. 

  54.     </div>
    55. 

  55. </body>
    56. 

  56. </html>
    57.

上一篇： PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法_PHP

下一篇： DIV+CSS应用_基础知识_html/css_WEB-ITnose

推荐阅读