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

table制作简历和form简单用户注册

程序员文章站 2022-03-24 09:45:34
...

table制作简历

浏览效果

table制作简历和form简单用户注册

代码如下

    

  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>table制作简历</title>
    8. 

  8.     <style>
    9. 

  9.         body{
    10. 

  10.             text-align: center;
    11. 

  11.         }
    12. 

  12.         table{
    13. 

  13.             width: 700px;
    14. 

  14.             height: auto;
    15. 

  15.             margin: auto;
    16. 

  16.         }
    17. 

  17.        tr th{
    18. 

  18.             height: 30px;
    19. 

  19.         }
    20. 

  20.         .yan{
    21. 

  21.             background: #ccf;
    22. 

  22.         }
    23. 

  23.        tr td{
    24. 

  24.             width: 100px;
    25. 

  25.             height: 20px;
    26. 

  26.         }
    27. 

  27.         .s{
    28. 

  28.             height: 40px;
    29. 

  29.         }
    30. 

  30.     </style>
    31. 

  31. </head>
    32. 

  32. <body>
    33. 

  33.     <table  border="1" cellpadding="0" cellspacing="0">
    34. 

  34.         <tr><th class="yan" colspan="7">个人基本资料</th></tr>
    35. 

  35.         <tr>
    36. 

  36.             <td>姓名</td>
    37. 

  37.             <td></td>
    38. 

  38.             <td>性别</td>
    39. 

  39.             <td></td>
    40. 

  40.             <td>民族</td>
    41. 

  41.             <td></td>
    42. 

  42.             <td rowspan="4">照片</td>
    43. 

  43.         </tr>
    44. 

  44.         <tr>
    45. 

  45.             <td>籍贯</td>
    46. 

  46.             <td colspan="2"></td>
    47. 

  47.             <td>政治面貌</td>
    48. 

  48.             <td colspan="2"></td>
    49. 

  49.         </tr>
    50. 

  50.         <tr>
    51. 

  51.             <td>学校</td>
    52. 

  52.             <td></td>
    53. 

  53.             <td>学历</td>
    54. 

  54.             <td></td>
    55. 

  55.             <td>专业</td>
    56. 

  56.             <td></td>
    57. 

  57.         </tr>
    58. 

  58.         <tr>
    59. 

  59.             <td>身高</td>
    60. 

  60.             <td></td>
    61. 

  61.             <td>体重</td>
    62. 

  62.             <td></td>
    63. 

  63.             <td>联系电话</td>
    64. 

  64.             <td></td>
    65. 

  65.         </tr>
    66. 

  66.         <tr><th class="yan" colspan="7">求职意向</th></tr>
    67. 

  67.         <tr>
    68. 

  68.             <td>行业</td>
    69. 

  69.             <td colspan="6"></td>
    70. 

  70.         </tr>
    71. 

  71.         <tr>
    72. 

  72.             <td>目标岗位</td>
    73. 

  73.             <td colspan="6"></td>
    74. 

  74.         </tr>
    75. 

  75.         <tr>
    76. 

  76.             <td>工作性质</td>
    77. 

  77.             <td colspan="3"></td>
    78. 

  78.             <td>任职时间</td>
    79. 

  79.             <td colspan="2"></td>
    80. 

  80.         </tr>
    81. 

  81.         <tr>
    82. 

  82.             <td>月薪期望</td>
    83. 

  83.             <td colspan="3"></td>
    84. 

  84.             <td>工作地点</td>
    85. 

  85.             <td colspan="2"></td>
    86. 

  86.         </tr>
    87. 

  87.         <tr>
    88. 

  88.             <td>相关说明</td>
    89. 

  89.             <td colspan="6"></td>
    90. 

  90.         </tr>
    91. 

  91.         <tr><th class="yan" colspan="7">教育背景</th></tr>
    92. 

  92.         <tr>
    93. 

  93.             <td>开始时间</td>
    94. 

  94.             <td>结束时间</td>
    95. 

  95.             <td colspan="2">学校</td>
    96. 

  96.             <td colspan="3">相关说明</td>
    97. 

  97.         </tr>
    98. 

  98.         <tr>
    99. 

  99.             <td></td>
    100. 

  100.             <td></td>
    101. 

  101.             <td colspan="2"></td>
    102. 

  102.             <td colspan="3"></td>
    103. 

  103.         </tr>
    104. 

  104.         <tr>
    105. 

  105.             <td></td>
    106. 

  106.             <td></td>
    107. 

  107.             <td colspan="2"></td>
    108. 

  108.             <td colspan="3"></td>
    109. 

  109.         </tr>
    110. 

  110.         <tr>
    111. 

  111.             <td></td>
    112. 

  112.             <td></td>
    113. 

  113.             <td colspan="2"></td>
    114. 

  114.             <td colspan="3"></td>
    115. 

  115.         </tr>
    116. 

  116.         <tr>
    117. 

  117.             <td>最高学历</td>
    118. 

  118.             <td colspan="2"></td>
    119. 

  119.             <td>选修专业</td>
    120. 

  120.             <td colspan="3"></td>
    121. 

  121.         </tr>
    122. 

  122.         <tr>
    123. 

  123.             <td>所学专业</td>
    124. 

  124.             <td colspan="6"></td>
    125. 

  125.         </tr>
    126. 

  126.         <tr>
    127. 

  127.             <td>个人技能</td>
    128. 

  128.             <td colspan="6"></td>
    129. 

  129.         </tr>
    130. 

  130.         <tr>
    131. 

  131.             <td>奖项正是</td>
    132. 

  132.             <td colspan="6"></td>
    133. 

  133.         </tr>
    134. 

  134.         <tr>
    135. 

  135.             <td>语言能力</td>
    136. 

  136.             <td></td>
    137. 

  137.             <td>国语水平</td>
    138. 

  138.             <td></td>
    139. 

  139.             <td>其他语言</td>
    140. 

  140.             <td colspan="2"></td>
    141. 

  141.         </tr>
    142. 

  142.         <tr>
    143. 

  143.             <th class="yan" colspan="7">自我评价</th>
    144. 

  144.         </tr>
    145. 

  145.         <tr>
    146. 

  146.             <td>兴趣和特长</td>
    147. 

  147.             <td colspan="6"></td>
    148. 

  148.         </tr>
    149. 

  149.         <tr class="s">
    150. 

  150.             <td>获奖情况</td>
    151. 

  151.             <td colspan="6"></td>
    152. 

  152.         </tr>
    153. 

  153.         <tr class="s">
    154. 

  154.             <td>个人评价</td>
    155. 

  155.             <td colspan="6"></td>
    156. 

  156.         </tr>
    157. 

  157.     </table>
    158. 

  158. </body>
    159. 

  159. </html>
    160.

form简单用户注册

浏览效果

table制作简历和form简单用户注册

代码如下

    

  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>form编写用户注册</title>
    8. 

  8.     <style>
    9. 

  9.         .box{
    10. 

  10.             width: 600px;
    11. 

  11.             height: auto;
    12. 

  12.             margin: auto;
    13. 

  13.             background: cornsilk;
    14. 

  14.         }
    15. 

  15.         h3{
    16. 

  16.             text-align: center;
    17. 

  17.         }
    18. 

  18.     </style>
    19. 

  19. </head>
    20. 

  20. <body>
    21. 

  21.     <div class="box">
    22. 

  22.     <h3>用户注册</h3>
    23. 

  23. <form action="" method="">
    24. 

  24.     <div>
    25. 

  25.         账号: <input type="text" name="user_name" placeholder="不超过八个字符">
    26. 

  26.     </div>
    27. 

  27.     <div>
    28. 

  28.         密码: <input type="password" name="pwd" placeholder="6-16个字符">
    29. 

  29.     </div>
    30. 

  30.     <div>
    31. 

  31.         邮箱: <input type="email" name="email" placeholder="example@mail.com">
    32. 

  32.     </div>
    33. 

  33.     <div>
    34. 

  34.         生日: <input type="date" name="birthday">
    35. 

  35.     </div>
    36. 

  36.     <div>
    37. 

  37.         课程:
    38. 

  38.         <select name="kecheng">
    39. 

  39.             <option value="h5" selected>HTML5</option>
    40. 

  40.             <option value="c3">CSS3</option>
    41. 

  41.             <option value="js">javascript</option>
    42. 

  42.             <option value="php">PHP</option>
    43. 

  43.             <option value="java">java</option>
    44. 

  44.         </select>
    45. 

  45.     </div>
    46. 

  46.     <div>
    47. 

  47.         爱好:
    48. 

  48.         <label>
    49. 

  49.             <input type="checkbox"  value="game"> 玩游戏
    50. 

  50.         </label>
    51. 

  51.         <label>
    52. 

  52.             <input type="checkbox"  value="video"> 旅游
    53. 

  53.         </label>
    54. 

  54.         <label>
    55. 

  55.             <input type="checkbox"  value="code"> 打代码
    56. 

  56.         </label>
    57. 

  57.         <label>
    58. 

  58.             <input type="checkbox"  value="code"> 看书看电影
    59. 

  59.         </label>
    60. 

  60.     </div>
    61. 

  61.     <div>
    62. 

  62.         性别:
    63. 

  63.         <label>
    64. 

  64.             <input type="radio" name="sex" value="1">男
    65. 

  65.         </label>
    66. 

  66.         <label>
    67. 

  67.             <input type="radio" name="sex" value="2">女
    68. 

  68.         </label>
    69. 

  69.         <label>
    70. 

  70.             <input type="radio" name="sex" value="0" checked>保密
    71. 

  71.         </label>
    72. 

  72.     </div>
    73. 

  73.     <div>
    74. 

  74.         <div>简介:</div>
    75. 

  75.         <textarea rows="10" cols="40" name="desc"></textarea>
    76. 

  76.     </div>
    77. 

  77.     <input type="submit" value="提交">
    78. 

  78.     <input type="button" value="取消">
    79. 

  79. </form>
    80. 

  80. </div>
    81. 

  81. </body>
    82. 

  82. </html>
    83. 

  83. </body>
    84. 

  84. </html>
    85.

上一篇： 轮播图自动翻页功能实现

下一篇： 个人简历表格制作与表单制作

推荐阅读