table作业练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格作业</title>
  6.     <style>
  7.         .jibenziliao{
  8.             width: 1200px;
  9.             margin: 0 auto;
  10.             height: 280px;
  11.             border: 1px solid #000;
  12.             border-collapse:collapse;
  13.         }
  14.         .gongzuojingli{
  15.             width: 1200px;
  16.             margin: 0 auto;
  17.             height: 600px;
  18.             border: 1px solid #000;
  19.             border-collapse:collapse;
  20.         }
  21.         .gongzuojingli tr td{
  22.             text-align: center;
  23.         }
  24.         table tr{
  25.             border: 1px solid #000;
  26.             border-collapse:collapse;
  27.         }
  28.         table tr td{
  29.             border: 1px solid #000;
  30.             border-collapse:collapse;
  31.             width: 20%;
  32.         }
  33.         table tr th{
  34.             border: 1px solid #000;
  35.             border-collapse:collapse;
  36.         }
  37.         #biaoti{
  38.             text-align: center;
  39.         }
  40.         .huanhang{
  41.             background: aqua;
  42.             height: 30px;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <table class="jibenziliao">
  48.             <tr>
  49.                <td class="huanhang" colspan="5"></td>
  50.             </tr>
  51.         <tr>
  52.             <td id="biaoti" colspan="5">---基本资料---</td>
  53.         </tr>
  54.             <tr>
  55.                 <td>姓名:</td>
  56.                 <td>马小姐</td>
  57.                 <td>性别：</td>
  58.                 <td>女</td>
  59.                 <td rowspan="7"></td>
  60.             </tr>
  61.         <tr>
  62.             <td>学历:</td>
  63.             <td>中专</td>
  64.             <td>身高：</td>
  65.             <td>180CM</td>
  66. <!--            <td></td>-->
  67.         </tr>
  68.         <tr>
  69.             <td>籍贯:</td>
  70.             <td>广东</td>
  71.             <td>出生年月：</td>
  72.             <td>1999-09-22</td>
  73. <!--            <td></td>-->
  74.         </tr>
  75.         <tr>
  76.             <td>毕业院校:</td>
  77.             <td colspan="3">清华大学</td>
  78. <!--            <td></td>-->
  79.         </tr>
  80.         <tr>
  81.             <td>主修专业:</td>
  82.             <td colspan="3">计算机技术</td>
  83.             <!--            <td></td>-->
  84.         </tr>
  85.         <tr>
  86.             <td>工作经验:</td>
  87.             <td>未知</td>
  88.             <td>目前年薪:</td>
  89.             <td>保密</td>
  90.             <!--            <td></td>-->
  91.         </tr>
  92.         <tr>
  93.             <td>有效证件:</td>
  94.             <td>身份证</td>
  95.             <td>证件号码:</td>
  96.             <td>*******************</td>
  97.             <!--            <td></td>-->
  98.         </tr>
  99.     </table>
  100.     <table class="gongzuojingli">
  101.         <tr>
  102.             <td class="huanhang" colspan="4"></td>
  103.         </tr>
  104.         <tr>
  105.             <td id="biaoti" colspan="4" >---求职意向---</td>
  106.         </tr>
  107.         <tr>
  108.             <td>寻求职位</td>
  109.             <td colspan="3">Java开发工程师</td>
  110.         </tr>
  111.         <tr>
  112.             <td>求职地区</td>
  113.             <td>火星</td>
  114.             <td>工资待遇</td>
  115.             <td>面议</td>
  116.         </tr>
  117.         <tr>
  118.             <td>自我评价</td>
  119.             <td colspan="3">本人对工作认真负责。。。本人对工作认真负责。。。本人对工作认真负责。。。本人对工作认真负责。。。本人对工作认真负责。。。本人对工作认真负责。。。本人对工作认真负责。。。本人对工作认真负责。。。本人对工作认真负责。。。本人对工作认真负责。。。本人对工作认真负责。。。本人对工作认真负责。。。</td>
  120.         </tr>
  121.         <tr><td class="huanhang" colspan="4"></td></tr>
  122.         <tr><td id="biaoti" colspan="4">---教育培训---</td></tr>
  123.         <tr>
  124.             <th>起止时间</th>
  125.             <th>就读院校名称</th>
  126.             <th>主修专业</th>
  127.             <th>学历</th>
  128.         </tr>
  129.         <tr>
  130.             <td>2019-09-2022-09</td>
  131.             <td>北京清华大学</td>
  132.             <td>计算机硕士</td>
  133.             <td>硕士</td>
  134.         </tr>
  135.         <tr><td class="huanhang" colspan="4"></td></tr>
  136.         <tr><td id="biaoti" colspan="4">---工作经验---</td></tr>
  137.         <tr>
  138.             <td>就职公司</td>
  139.             <td></td>
  140.             <td>公司行业</td>
  141.             <td>软件开发</td>
  142.         </tr>
  143.         <tr>
  144.             <td>就职时间</td>
  145.             <td>1999至今</td>
  146.             <td>就职部门</td>
  147.             <td>开发部</td>
  148.         </tr>
  149.         <tr>
  150.             <td>公司性质</td>
  151.             <td>其他</td>
  152.             <td>就职职位</td>
  153.             <td>java开发</td>
  154.         </tr>
  155.         <tr>
  156.             <td>工作描述</td>
  157.             <td colspan="3">软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发软件开发</td>
  158.         </tr>
  159.         <tr><td class="huanhang" colspan="4"></td></tr>
  160.         <tr><td id="biaoti" colspan="4">---联系方式---</td></tr>
  161.         <tr>
  162.             <td>联系方式</td>
  163.             <td colspan="3">133*******</td>
  164.         </tr>
  165.         <tr>
  166.             <td>联络手机</td>
  167.             <td colspan="3">138*******</td>
  168.         </tr>
  169.         <tr>
  170.             <td>电子邮件</td>
  171.             <td colspan="3" style="text-decoration: underline">*************@163.com</td>
  172.         </tr>
  174.     </table>
  177. </body>
  178. </html>

table效果图

form练习代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>form练习</title>
  6.   <style>
  7.     :root{
  8.       --fontColor:#666;
  9.     }
  10.     .title{
  11.       color: var(--fontColor);
  12.       font-size: 25px;
  13.       font-weight: bold;
  14.       text-align: center;
  15.     }
  16.     .biaoti{
  17.       font-size: 20px;
  18.     }
  19.   </style>
  20. </head>
  21. <body>
  22. <p class="title">用户注册</p>
  23. <div style="text-align: center">
  24.   <form action="">
  25. <lable><span class="biaoti">账号：</span><input type="text" maxlength="8" placeholder="不超过8个字符" required></lable>
  26. <br>
  27. <lable><span class="biaoti">密码：</span><input type="password" minlength="6" maxlength="16" placeholder="6-16个字符" required></lable><br>
  28. <lable><span class="biaoti">邮箱：</span><input type="email" placeholder="xxxx@163.com" required></lable><br>
  29. <lable><span class="biaoti">年龄：</span><input type="number" required></lable><br>
  30. <lable><span class="biaoti">生日：</span><input type="date" required></lable><br>
  31. <lable><span class="biaoti">课程：</span>
  32.   <select name="" id="">
  33.     <option value="">--- 请选择---</option>
  34.     <option value="">java</option>
  35.     <option value="">php</option>
  36.     <option value="">c++</option>
  37.     <option value="" selected>html5</option>
  38.   </select>
  39. </lable><br>
  41.   <lable> <span class="biaoti">爱好：</span>
  42. <input type="checkbox" name="aihao" value="打游戏">打游戏
  43.   <input type="checkbox" name="aihao" value="撸代码">撸代码
  44.   <input type="checkbox" name="aihao" value="看电影">看电影</lable>
  45.   <br>
  46.   <lable>
  47.     <span class="biaoti">性别：</span>
  48.     <input type="radio" name="sex" value="1">男
  49.     <input type="radio" name="sex" value="2">女
  50.     <input type="radio" name="sex" value="3">保密
  51.   </lable>
  52.   <br>
  53.   <lable>
  54.     <span class="biaoti">简介：</span>
  55.     <textarea name="" id="" cols="30" rows="10"></textarea>
  56.   </lable>
  57.     <br>
  58.   <input type="submit" value="提交">
  59.   <input type="reset" value="清空">
  62.   </form>
  64. </div>
  66. </body>
  67. </html>

form表单效果图

更多相关文章

  1. 简历表代码
  2. html 练习（一张简历/用户注册）
  3. 创建table表格和创建form表单并JS判断
  4. table和form的使用
  5. 大前端第二天第一个作业
  6. 学习，是脱贫致富的捷径
  7. 普通人打工，用创业心态干好8小时工作
  8. 工作中线程的启动
  9. 怎么在日常工作中践行逻辑思维能力？

随机推荐

  1. 如何将javascript set style属性返回到CS
  2. 带搜索框选择的下拉列表
  3. bootstrap 中 css 与 javascript 的使用
  4. javascript自适应宽度的瀑布流
  5. 如何将占位符放在struts textfield标记中
  6. 使用Acrobat的javascript调试器
  7. PHP发布请求未识别的索引错误
  8. 为什么elementFromPoint（）在IE 11上的ifram
  9. JavaScript - 检测click事件是否触发了D
  10. WebKit "拒绝设置不安全的标题'内容长度'