简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > table应用和表单演练
Blogger Information
Blog 26
fans 0
comment 3
visits 17703
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
table应用和表单演练
后网络时代
Original
502 people have browsed it

1. 制作一个你的课程表；

  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>课表</title>
  7. </head>
  8. <style  type="text/css">
  9. *{
  10.     margin: 0   auto;
  11.     padding:0;
  12.     border:0;
  13.     box-sizing:border-box;
  14.     font-size: 12px;
  16. }
  17. table{
  18.     border-collapse: collapse;
  19.     width:680px;
  20.     text-align: center;
  21.     line-height: 30px;
  22. }
  23. table  caption{
  24. padding:6px;
  25. font-weight: bold;
  26. font-size: 16px;
  27. }
  29. table  tr  th,table  tr  td{
  30.     border:1px solid  lightblue;
  31. }
  32. thead  tr{
  33.     background-color:lightseagreen;
  34. }
  35. table  tr  th:hover,table  tr  td:hover{
  36.     background-color: mediumaquamarine;
  37. }
  38. table  tr  th:hover,table  tr  th[rowspan="4"]{
  39.     background-color:mediumslateblue;
  40. }
  41. table  tr  th:hover,table  tr  th[rowspan="2"]{
  42.     background-color:mediumslateblue;
  43. }
  44. table  tbody  tr  td:nth-of-type(1){
  45.     padding: 0 12px;
  46. }
  47. </style>
  48. <body>
  49. <table>
  50.     <!-- 标签定义表格的页脚 -->
  51. <caption>课表</caption>
  52. <!-- 标签定义表格的表头 -->
  53. <thead>
  54.     <!-- th表头单元格 -->
  55. <tr><th   colspan="2">课程</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>
  56. </thead>
  57. <!-- 标签定义表格的页脚tfoot -->
  58. <tfoot>
  59.     <tr>
  60.         <td   colspan="7" >晚自习</td>
  61.       </tr>  
  62. </tfoot>
  63. <tbody>
  64.     <!-- td标准单元格  rowspan 行合并     colspan：列合并 -->
  65. <tr><th  rowspan="4">上午</th><td>1</td><td>大语</td><td>高数</td><td>模拟电路</td><td>汇编语言</td><td>c语言</td></tr>
  66. <tr><td>2</td><td>操作系统</td><td>计算机网络原理</td><td>数据库系统</td><td>面相对象的程序设计</td><td>概率论与数理统计</td></tr>
  67. <tr><td   colspan="6">课间操</td></tr>
  68. <tr><td>3</td><td>数据结构</td><td>模拟电路</td><td>汇编语言</td><td>计算机网络原理</td><td>大语</td></tr>
  69. <tr><th  colspan="7">午间休息</th></tr>
  70. <tr><th  rowspan="2">下午</th><td >4</td><td>汇编语言</td><td>高数</td><td>高数</td><td>模拟电路</td><td>大语</td></tr>
  71. <tr><td>5</td><td>模拟电路</td><td>高数</td><td>软件工程</td><td>计算机网络原理</td><td>模拟电路</td></tr>
  72. </tbody>
  73. </table>
  74. </body>
  75. </html>

效果：

2.将课堂上提及所有表单控件全部实例演示一遍

  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>Document</title>
  7. <style    type="text/css">
  8. *{
  9. margin:0;
  10. padding:0;
  11. border:0;
  12. box-sizing:border-box;
  13. outline: none;
  14. font-size: 14px;
  15. }
  16. form{
  17.   padding: 20px;
  18.   width:400px;
  19. }
  20. form  input,select{
  21.   width:300px;
  22.   border:1px  solid   lightblue;
  23.   margin: 6px 0;
  24. }
  25. textarea{
  26.   border:1px  solid   lightblue;
  27.   outline: none;
  28.   vertical-align:top;
  29.   margin: 6px 0;
  30.   resize: none;
  31. }
  32. button{
  33.   width:300px; 
  34.   border:1px  solid   lightblue;
  35.   margin: 6px 0;
  36.   background-color: #ffffff;
  37.   border-radius: 3px;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42.   <form action="index.php"  id="form1"  autocomplete="off"   method="POST"  enctype="multipart/form-data">
  43. <div><input   type="text"  id="name"  name="name"     required /></div>
  44.  <div><input  type="file"  name="up"   required    /></div>
  45. <div>
  46.    <select name="selec" id="selec">
  47.    <optgroup   label="我的分类">
  48.     <option value="文艺">文艺</option>
  49.     <option value="表演">表演</option>
  50.    </optgroup>
  51.    <optgroup  label="商家">
  52.     <option value="taobao">淘宝</option>
  53.     <option value="jingdong">京东</option>
  54.    </optgroup>
  55.    </select>
  56. </div>
  57.    <label for="sex">性别:</label>
  58.    <!-- 单选按钮 -->
  59.    <div>
  60.     <label for="male">男</label><input type="radio" name="gender" value="male" id="male" />
  61.     <label for="female">女</label> <input type="radio" name="gender" value="female" id="female" />
  62.    </div>
  63.    <label for="game">兴趣:</label>
  64.    <div>
  65.      <!--复选框的-->
  66.      <label for="game">游戏</label><input type="checkbox" name="bby[]" value="game" id="game" checked /><br/>
  67.      <label for="o2ot">跑步</label><input type="checkbox" name="bby[]" value="shoot" id="shoot" checked /><br/>
  68.      <label for="o2ot">读书</label><input type="checkbox" name="bby[]" value="shoot" id="sho"/>
  69.     </div>
  70.    <!-- 文本域 -->
  71.   <label for="desp">简述:</label><textarea name="desp" id="desp" cols="30" rows="10"></textarea>
  72.   <!-- <fieldset> 标签可以将表单内的相关元素分组 -->
  73.     <!-- <legend> 标签为 <fieldset> 元素定义标题。 -->
  74.   <fieldset>
  75.     <legend>产品分类</legend>
  76.     height: <input type="text"   name="height"/>
  77.     weight: <input type="text"   name="weight" />
  78.   </fieldset>
  79.   <button>发送</button>
  80.     </form>
  81. </body>
  82. </html>

效果：

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！