博客列表 >day2-1209 表单表格与控件的作业展示

day2-1209 表单表格与控件的作业展示

Allen在php中文网的学习笔记
Allen在php中文网的学习笔记原创
2020年12月09日 23:31:461901浏览

实战作业

作业环境说明

  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作业(列表/表格与表单)

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议