Blogger Information
Blog 16
fans 0
comment 0
visits 15852
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
day2-1209 表单表格与控件的作业展示
Allen在php中文网的学习笔记
Original
1904 people have browsed it

实战作业

作业环境说明

  1. 系统:centos
  2. web服务器:nginx
  3. php版本:7.4
  4. IDE:vscode

作业代码合集

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>day2-1209作业</title>
  7. <style>
  8. body {
  9. text-align: center;
  10. }
  11. ul {
  12. list-style-type: none;
  13. margin: 0;
  14. padding: 0;
  15. overflow: hidden;
  16. border: 1px solid #e7e7e7;
  17. background-color: #f3f3f3;
  18. }
  19. li {
  20. float: left;
  21. }
  22. li a {
  23. display: block;
  24. color: #666;
  25. text-align: center;
  26. padding: 14px 16px;
  27. text-decoration: none;
  28. }
  29. li a:hover:not(.active) {
  30. background-color: #ddd;
  31. }
  32. li a.active {
  33. color: white;
  34. background-color: #4CAF50;
  35. }
  36. table {
  37. margin: auto;
  38. }
  39. table.gridtable {
  40. font-family: verdana, arial, sans-serif;
  41. font-size: 1em;
  42. color: #333333;
  43. border-width: 1px;
  44. border-color: #666666;
  45. border-collapse: collapse;
  46. }
  47. table.gridtable th {
  48. border-width: 1px;
  49. padding: 8px;
  50. border-style: solid;
  51. border-color: #666666;
  52. background-color: #dedede;
  53. }
  54. table.gridtable td {
  55. border-width: 1px;
  56. padding: 8px;
  57. border-style: solid;
  58. border-color: #666666;
  59. background-color: #ffffff;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <ul>
  65. <li><a class="active" href="#">首页</a></li>
  66. <li><a href="#table">查看课程表</a></li>
  67. <li><a href="#change">修改课程表</a></li>
  68. </ul>
  69. <table class="gridtable" id="table">
  70. <caption>1209作业课程表</caption>
  71. <thead>
  72. <tr>
  73. <th colspan="2"></th>
  74. <!-- <th></th> -->
  75. <th>星期一</th>
  76. <th>星期二</th>
  77. <th>星期三</th>
  78. <th>星期四</th>
  79. <th>星期五</th>
  80. <th>星期六</th>
  81. <th>星期天</th>
  82. </tr>
  83. </thead>
  84. <tbody>
  85. <tr>
  86. <td rowspan="4">上午</td>
  87. <td>1</td>
  88. <td>洗漱</td>
  89. <td>洗漱</td>
  90. <td>洗漱</td>
  91. <td>洗漱</td>
  92. <td>洗漱</td>
  93. <td>洗漱</td>
  94. <td>洗漱</td>
  95. </tr>
  96. <tr>
  97. <!-- <td></td> -->
  98. <td>2</td>
  99. <td>早餐</td>
  100. <td>早餐</td>
  101. <td>早餐</td>
  102. <td>早餐</td>
  103. <td>早餐</td>
  104. <td>早餐</td>
  105. <td>早餐</td>
  106. </tr>
  107. <tr>
  108. <!-- <td></td> -->
  109. <td>3</td>
  110. <td>新闻</td>
  111. <td>新闻</td>
  112. <td>新闻</td>
  113. <td>新闻</td>
  114. <td>新闻</td>
  115. <td>新闻</td>
  116. <td>新闻</td>
  117. </tr>
  118. <tr>
  119. <!-- <td></td> -->
  120. <td>4</td>
  121. <td>工作</td>
  122. <td>工作</td>
  123. <td>工作</td>
  124. <td>工作</td>
  125. <td>工作</td>
  126. <td>工作</td>
  127. <td>工作</td>
  128. </tr>
  129. <tr>
  130. <td colspan="8" style="text-align: center;">中午休息</td>
  131. <!-- <td></td>
  132. <td></td>
  133. <td></td>
  134. <td></td>
  135. <td></td>
  136. <td></td>
  137. <td></td>
  138. <td></td> -->
  139. </tr>
  140. <tr>
  141. <td rowspan="4">下午</td>
  142. <td>5</td>
  143. <td>工作</td>
  144. <td>工作</td>
  145. <td>工作</td>
  146. <td>工作</td>
  147. <td>工作</td>
  148. <td>工作</td>
  149. <td>工作</td>
  150. </tr>
  151. <tr>
  152. <!-- <td></td> -->
  153. <td>6</td>
  154. <td>工作</td>
  155. <td>工作</td>
  156. <td>工作</td>
  157. <td>工作</td>
  158. <td>工作</td>
  159. <td>工作</td>
  160. <td>工作</td>
  161. </tr>
  162. <tr>
  163. <!-- <td></td> -->
  164. <td>7</td>
  165. <td>工作</td>
  166. <td>工作</td>
  167. <td>工作</td>
  168. <td>工作</td>
  169. <td>工作</td>
  170. <td>工作</td>
  171. <td>工作</td>
  172. </tr>
  173. <tr>
  174. <!-- <td></td> -->
  175. <td>8</td>
  176. <td>工作</td>
  177. <td>工作</td>
  178. <td>工作</td>
  179. <td>工作</td>
  180. <td>工作</td>
  181. <td>工作</td>
  182. <td>工作</td>
  183. </tr>
  184. <tr>
  185. <td colspan="8" style="text-align: center;">晚间休息</td>
  186. <!-- <td></td>
  187. <td></td>
  188. <td></td>
  189. <td></td>
  190. <td></td>
  191. <td></td>
  192. <td></td>
  193. <td></td> -->
  194. </tr>
  195. <tr>
  196. <td rowspan="4">晚上</td>
  197. <td>9</td>
  198. <td>学习</td>
  199. <td>学习</td>
  200. <td>学习</td>
  201. <td>学习</td>
  202. <td>学习</td>
  203. <td>学习</td>
  204. <td>学习</td>
  205. </tr>
  206. <tr>
  207. <!-- <td></td> -->
  208. <td>10</td>
  209. <td>学习</td>
  210. <td>学习</td>
  211. <td>学习</td>
  212. <td>学习</td>
  213. <td>学习</td>
  214. <td>学习</td>
  215. <td>学习</td>
  216. </tr>
  217. <tr>
  218. <!-- <td></td> -->
  219. <td>11</td>
  220. <td>学习</td>
  221. <td>学习</td>
  222. <td>学习</td>
  223. <td>学习</td>
  224. <td>学习</td>
  225. <td>学习</td>
  226. <td>学习</td>
  227. </tr>
  228. <tr>
  229. <!-- <td></td> -->
  230. <td>12</td>
  231. <td>巩固练习</td>
  232. <td>巩固练习</td>
  233. <td>巩固练习</td>
  234. <td>巩固练习</td>
  235. <td>巩固练习</td>
  236. <td>巩固练习</td>
  237. <td>巩固练习</td>
  238. </tr>
  239. <tr>
  240. <td colspan="9" style="text-align: center;">本实例CSS由网上搜集</td>
  241. </tr>
  242. </tbody>
  243. </table>
  244. <hr>
  245. <form action="" id="change" style="margin-top: 1000px;">
  246. <h3>更新课程表</h3>
  247. <label for="table-name">表格标题:</label>
  248. <input type="text" name="table_title" id="table-name" placeholder="1209作业课程表">
  249. <br>
  250. <label for="day1">更新日期:</label>
  251. <input type="radio" name="day" id="day1" checked><label for="day1">星期一</label>
  252. <input type="radio" name="day" id="day2"><label for="day2">星期二</label>
  253. <input type="radio" name="day" id="day3"><label for="day3">星期三</label>
  254. <input type="radio" name="day" id="day4"><label for="day4">星期四</label>
  255. <input type="radio" name="day" id="day5"><label for="day5">星期五</label>
  256. <input type="radio" name="day" id="day6"><label for="day6">星期六</label>
  257. <input type="radio" name="day" id="day7"><label for="day7">星期天</label>
  258. <br>
  259. <label for="">更新课程:</label>
  260. <select name="study" id="study" multiple size="2">
  261. <option value="1">1</option>
  262. <option value="2">2</option>
  263. <option value="3">3</option>
  264. <option value="4">4</option>
  265. <option value="5">5</option>
  266. <option value="6">6</option>
  267. <option value="7">7</option>
  268. <option value="8">8</option>
  269. <option value="9">9</option>
  270. <option value="10">10</option>
  271. <option value="11">11</option>
  272. <option value="12">12</option>
  273. </select>
  274. <br>
  275. <label for="">更新内容:</label>
  276. <div>
  277. <input type="checkbox" name="connent[]" id="game" value="game"><label for="game">游戏</label>
  278. <input type="checkbox" name="connent[]" id="chat" value="chat"><label for="chat">聊天</label>
  279. <input type="checkbox" name="connent[]" id="video" value="video"><label for="video">视频</label>
  280. </div>
  281. <br>
  282. <label for="">上传背景图片:</label>
  283. <input type="hidden" name="MAX_FILE_SIZE" value="8192">
  284. <input type="file" name="background" id="background">
  285. <br>
  286. <label for="email">管理员邮箱:</label>
  287. <input type="email" name="email" id="email" required placeholder="请输入管理员邮箱!">
  288. <br>
  289. <label for="password">管理员密码:</label>
  290. <input type="password" name="password" id="password" required placeholder="请输入管理员密码">
  291. <br>
  292. <label for="comment">本次修改备注:</label>
  293. <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  294. <br>
  295. <button>确认修改</button>
  296. </form>
  297. <ul>
  298. <li><a class="active" href="#">首页</a></li>
  299. <li><a href="#table">查看课程表</a></li>
  300. <li><a href="#change">修改课程表</a></li>
  301. </ul>
  302. </body>
  303. </html>

作业地址

作业标题:1208作业(列表/表格与表单)

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post