一.学生课程表

1.课程表模样

2.课程表html代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>2020新学期课程表</title>
  8. <style type="text/css">
  9. caption {
  10. /*定义标题加粗*/
  11. font-weight: bold;
  12. }
  13. table,
  14. th,
  15. td {
  16. /*定义表格样式*/
  17. border: 1px solid red;
  18. border-collapse: collapse;
  19. text-align: center;
  20. }
  21. .themorning {
  22. /*定义字体颜色和背景*/
  23. color: fuchsia;
  24. background-color: lightpink;
  25. }
  26. .theafternoon {
  27. /*定义字体颜色和背景*/
  28. color: goldenrod;
  29. background-color: lightcyan;
  30. }
  31. thead {
  32. /*定义背景颜色*/
  33. background-color: lightcoral;
  34. }
  35. tfoot {
  36. /*定义背景颜色*/
  37. background-color: lemonchiffon;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div>
  43. <table>
  44. <!-- 表格标题 -->
  45. <caption>
  46. 2020新学期课程表
  47. </caption>
  48. <!-- 表格头部 -->
  49. <thead>
  50. <th>时间</th>
  51. <th>星期一</th>
  52. <th>星期二</th>
  53. <th>星期三</th>
  54. <th>星期四</th>
  55. <th>星期五</th>
  56. </thead>
  57. <!-- 表格体部上午 -->
  58. <tbody>
  59. <tr>
  60. <td rowspan="4" class="themorning" id="top1">上午</td>
  61. <td class="themorning">语文</td>
  62. <td class="themorning">英语</td>
  63. <td class="themorning">数学</td>
  64. <td class="themorning">音乐</td>
  65. <td class="themorning">数学</td>
  66. </tr>
  67. <tr>
  68. <!-- <td class="themorning"></td> -->
  69. <td class="themorning">音乐</td>
  70. <td class="themorning">美术</td>
  71. <td class="themorning">语文</td>
  72. <td class="themorning">英语</td>
  73. <td class="themorning">语文</td>
  74. </tr>
  75. <tr>
  76. <!-- <td class="themorning"></td> -->
  77. <td class="themorning">美术</td>
  78. <td class="themorning">阅读</td>
  79. <td class="themorning">体育</td>
  80. <td class="themorning">数学</td>
  81. <td class="themorning">英语</td>
  82. </tr>
  83. <tr>
  84. <!-- <td class="themorning"></td> -->
  85. <td class="themorning">英语</td>
  86. <td class="themorning">音乐</td>
  87. <td class="themorning">科学</td>
  88. <td class="themorning">美术</td>
  89. <td class="themorning">科学</td>
  90. </tr>
  91. </tbody>
  92. <!-- 表格体部下午 -->
  93. <tbody>
  94. <tr>
  95. <td rowspan="4" class="theafternoon" id="top2">下午</td>
  96. <td class="theafternoon">语文</td>
  97. <td class="theafternoon">英语</td>
  98. <td class="theafternoon">数学</td>
  99. <td class="theafternoon">音乐</td>
  100. <td class="theafternoon">数学</td>
  101. </tr>
  102. <tr>
  103. <!-- <td class="theafternoon"></td> -->
  104. <td class="theafternoon">音乐</td>
  105. <td class="theafternoon">美术</td>
  106. <td class="theafternoon">语文</td>
  107. <td class="theafternoon">英语</td>
  108. <td class="theafternoon">语文</td>
  109. </tr>
  110. <tr>
  111. <!-- <td class="theafternoon"></td> -->
  112. <td class="theafternoon">美术</td>
  113. <td class="theafternoon">阅读</td>
  114. <td class="theafternoon">体育</td>
  115. <td class="theafternoon">数学</td>
  116. <td class="theafternoon">英语</td>
  117. </tr>
  118. <tr>
  119. <!-- <td class="theafternoon"></td> -->
  120. <td class="theafternoon">音乐</td>
  121. <td class="theafternoon">美术</td>
  122. <td class="theafternoon">语文</td>
  123. <td class="theafternoon">英语</td>
  124. <td class="theafternoon">语文</td>
  125. </tr>
  126. </tbody>
  127. <!-- 表格部尾部 -->
  128. <tfoot>
  129. <tr>
  130. <td>备注:</td>
  131. <td colspan="5">每天下午17:00放学,作业在晚上20:00提交到群内</td>
  132. </tr>
  133. </tfoot>
  134. </table>
  135. </div>
  136. </body>
  137. </html>

二.用户注册表单

1.用户注册表单模样

2.用户注册表单html代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>用户注册表单</title>
  8. <style type="text/css">
  9. div {
  10. border: 1px solid coral;
  11. width: 245px;
  12. height: 35px;
  13. }
  14. #submit {
  15. text-align: center;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div>
  21. <form method="POST" action="">
  22. <!-- maxlength 设置最大长12位数 minlength 设置最小6位数 autofocus 设置自动焦点 required 设置必填项 -->
  23. <div>
  24. <label for="usserneme"> 账号:*</label>
  25. <input
  26. type="text"
  27. id="usserneme"
  28. name="usserneme"
  29. minlength="6"
  30. maxlength="12"
  31. placeholder="*号必填项6-8位数"
  32. autofocus
  33. required
  34. />
  35. </div>
  36. <div>
  37. <!-- input type password 是密码框选项可以隐藏文本输入 -->
  38. <label for="password"> 密码:*</label>
  39. <input
  40. type="password"
  41. name="password"
  42. id="password"
  43. placeholder="*号必填项字母+数字"
  44. minlength="8"
  45. maxlength="12"
  46. required
  47. />
  48. </div>
  49. <div>
  50. <label for="emali">邮箱:*</label>
  51. <input
  52. type="email"
  53. name="emali"
  54. id="emali"
  55. placeholder="*号必填项admin@qq.com"
  56. required
  57. />
  58. </div>
  59. <div>
  60. <!-- 单选框使用 input type radio -->
  61. <label for="secret">性别:</label>
  62. <input type="radio" name="gender" id="male" value="male" />
  63. <label for="male"></label>
  64. <input type="radio" name="gender" id="female" value="female" />
  65. <label for="female"></label>
  66. <input
  67. type="radio"
  68. name="gender"
  69. id="secret"
  70. value="secret"
  71. checked
  72. />
  73. <label for="secret">保密</label>
  74. </div>
  75. <div>
  76. <label for="">爱好:</label>
  77. <input type="checkbox" name="hobby[]" id="lvxing" value="lvxing" />
  78. <label for="lvxing">旅行</label>
  79. <input
  80. type="checkbox"
  81. name="hobby[]"
  82. id="yumaoqiu"
  83. value="yumaoqiu"
  84. checked
  85. />
  86. <label for="yumaoqiu">羽毛球</label>
  87. <input type="checkbox" name="hobby[]" id="lanqiu" value="lanqiu" />
  88. <label for="lanqiu">篮球</label>
  89. </div>
  90. <div>
  91. <!-- 复选框 select要配合option一起使用 selected是默认选一个值 -->
  92. <label for="">想学习:</label>
  93. <select name="" id="">
  94. <option value="html">html</option>
  95. <option value="css">css</option>
  96. <option value="JavaScript">JavaScript</option>
  97. <option value="php" selected>php</option>
  98. </select>
  99. </div>
  100. <div>
  101. <!-- 这是一个input+select 下拉列表+文本框 -->
  102. <label for="">关键字:</label>
  103. <input
  104. type="search"
  105. name="search"
  106. id=""
  107. list="my-key"
  108. placeholder="请输入文字搜索"
  109. />
  110. <datalist id="my-key">
  111. <option value="php中文网"></option>
  112. <option value="百度一下"></option>
  113. <option value="新浪微博"></option>
  114. </datalist>
  115. </div>
  116. <div id="submit">
  117. <!-- input type submit 提交按钮 -->
  118. <input type="submit" value="提交" />
  119. </div>
  120. </form>
  121. </div>
  122. </body>
  123. </html>

更多相关文章

  1. html基础:制作简单的表格与表单
  2. 利用html制作一个课程表与注册表
  3. 课程表、用户注册及 css 预习
  4. markdown的常用语法
  5. Python数据分析难吗?需要英语数学基础吗?
  6. 学习Python数学英语基础重要吗?Python教程!
  7. 课程表与表单的制作
  8. Android(安卓)多语言支持
  9. Android遇上Kotlin | Kotlin若只如初见

随机推荐

  1. android兼容2.2及以前版本的退出方法
  2. android 弹出选择框,简单通用弹出选择框
  3. Android图标靠界面的右边的实现
  4. android仿UC墨迹天气左右拖动效果
  5. ProgressBar属性小结
  6. 如何隐藏Android4.0及以上版本的ActionBa
  7. Android--AT9G45开发板移植
  8. Android应用程序调用系统解锁页面
  9. AndroidMainifest标签使用说明3——<acti
  10. Shape使用