html 练习-一张简历/用户注册表单

使用table布局，练习标签的使用及选择器的用法

效果图

一张简历

css 样式

  1.     <style>
  2.         table,
  3.         table tr th,
  4.         table tr td {
  5.             border: 1px solid #666;
  6.         }
  8.         table {
  9.             border-spacing: 0;
  10.             border-collapse: collapse;
  11.             width: 100;
  12.         }
  14.         tr:nth-of-type(2) td,
  15.         tr:nth-of-type(11) td,
  16.         tr:nth-of-type(16) td,
  17.         tr:nth-of-type(20) td,
  18.         tr:nth-of-type(26) td {
  19.             background-color: rgb(155, 211, 243);
  20.         }
  22.         td {
  23.             width: 100px;
  24.         }
  26.         .all-row,
  27.         tr:nth-of-type(12) td {
  28.             background-color: rgb(34, 163, 238);
  29.         }
  31.         td[rowspan="7"] {
  32.             width: 150px;
  33.         }
  34.     </style>

一张简历 主体部分

  1.     <table id="one">
  2.         <tr class="all-row">
  3.             <td colspan="5">&nbsp;</td>
  4.         </tr>
  5.         <tr>
  6.             <td colspan="5">-----基本资料-----</td>
  7.         </tr>
  8.         <tr>
  9.             <td>姓 名：</td>
  10.             <td>马小姐</td>
  11.             <td>性 别：</td>
  12.             <td>女</td>
  13.             <td rowspan="7"></td>
  14.         </tr>
  15.         <tr>
  16.             <td>学 历：</td>
  17.             <td>中专</td>
  18.             <td>身 高：</td>
  19.             <td>170CM</td>
  20.         </tr>
  21.         <tr>
  22.             <td>籍 贯：</td>
  23.             <td>广东</td>
  24.             <td>出生年月：</td>
  25.             <td>1991-12-01</td>
  26.         </tr>
  27.         <tr>
  28.             <td>毕业院校：</td>
  29.             <td colspan="3">汕头市林百欣科技中学</td>
  30.         </tr>
  31.         <tr>
  32.             <td>主修专业：</td>
  33.             <td colspan="3">管理学=>会计学</td>
  34.             </td>
  35.         </tr>
  36.         <tr>
  37.             <td>工作经验：</td>
  38.             <td>未知</td>
  39.             <td>目前年薪：</td>
  40.             <td>保密 /年</td>
  41.         </tr>
  42.         <tr>
  43.             <td>有效证件</td>
  44.             <td>身份证</td>
  45.             <td>证件编号</td>
  46.             <td>******************</td>
  47.         </tr>
  48.         <tr>
  49.             <td class="all-row" colspan="5">&nbsp;</td>
  50.         </tr>
  51.         <!-- 11行 -->
  52.         <tr>
  53.             <td colspan="5">-----求职意向-----</td>
  54.         </tr>
  55.         <!-- 12行 -->
  56.         <tr>
  57.             <td>寻求职位：</td>
  58.             <td colspan="4">出纳员，会计文员</td>
  59.         </tr>
  60.         <tr>
  61.             <td>求职地区：</td>
  62.             <td colspan="2">罗湖区，福田区</td>
  63.             <td>工资待遇：</td>
  64.             <td>面议</td>
  65.         </tr>
  66.         <tr>
  67.             <td>自我评价</td>
  68.             <td colspan="4">本人对待工作认真负责，谨慎，细心，与人相处融洽，任劳任怨，是一个有亲和力的人，乐干助人，有良好的团队精神，能吃苦耐劳。积极配合领导的每一项工作，深得领导和同事的欢迎。业余时问喜欢看书充实自己，并参加了西安交通大学成人高考提升自己的学历，勤于学习能不断授高自身的能力与综合素质，有上进心。具有较强的适应能力。熟悉办公软件，自毕业之后一直在企业担任出纳的工作，有一定的工作经验。 期望从事职业∶ 出纳员，会计文员 期望月薪∶面议 目前状况∶ 我目前处于离离职状态，可立即上岗。
  69.             </td>
  70.         </tr>
  71.         <tr>
  72.             <td class="all-row" colspan="5">&nbsp;</td>
  73.         </tr>
  74.         <!-- 16行 -->
  75.         <tr>
  76.             <td colspan="5">-----教育培训-----</td>
  77.         </tr>
  78.         <tr>
  79.             <td>起止时间</td>
  80.             <td colspan="2">就读院校名称</td>
  81.             <td>主修专业</td>
  82.             <td>学历</td>
  83.         </tr>
  84.         <tr>
  85.             <td>2009.09～2012.07</td>
  86.             <td colspan="2">汕头市林百欣科技中学</td>
  87.             <td>会计电算化</td>
  88.             <td>中专</td>
  89.         </tr>
  90.         <tr>
  91.             <td class="all-row" colspan="5">&nbsp;</td>
  92.         </tr>
  93.         <!-- 20行 -->
  94.         <tr>
  95.             <td colspan="5">-----工作经验（1）-----</td>
  96.         </tr>
  97.         <tr>
  98.             <td>就职公司：</td>
  99.             <td colspan="2">深圳市天鹏电器有限公司</td>
  100.             <td>公司行业：</td>
  101.             <td>其它</td>
  102.         </tr>
  103.         <tr>
  104.             <td>就职时间：</td>
  105.             <td colspan="2">2011年12月到如今</td>
  106.             <td>就只部门：</td>
  107.             <td>财务部</td>
  108.         </tr>
  109.         <tr>
  110.             <td>公司性质：</td>
  111.             <td colspan="2">其它</td>
  112.             <td>就职职位：</td>
  113.             <td>出纳员</td>
  114.         </tr>
  115.         <tr>
  116.             <td>工作描述：</td>
  117.             <td colspan="4">1．负齿办理现金收，付款业务 <br> 2. 职行存款，取款，付算工作 <br> 3. 负查日常费用报销. 员工借款给付，保证各项收支手续完整，金额准确 <br> 4，负击库存现金的保管及盘点，每天登记现金流水账，做到账款相符 <br> 5.每月准时交水电费，智理资金 <br> 6，协助会计报税，购买发票等 <br> 7，负责公司银行账号开办，变更，撤销工作8，负责公司管业执照，杖务登记证等证照的年检工作 <br> 9，负责印章，合同等的保管工作 <br> 10.完成上级领导的其它支排项
  118.                 <br>
  119.             </td>
  120.         </tr>
  121.         <tr>
  122.             <td class="all-row" colspan="5">&nbsp;</td>
  123.         </tr>
  124.         <!-- 26行 -->
  125.         <tr>
  126.             <td colspan="5">-----联系方式-----</td>
  127.         </tr>
  128.         <tr>
  129.             <td>联系电话：</td>
  130.             <td colspan="4">134********</td>
  131.         </tr>
  132.         <tr>
  133.             <td>联络手机：</td>
  134.             <td colspan="4">134********</td>
  135.         </tr>
  136.         <tr>
  137.             <td>电子邮件：</td>
  138.             <td colspan="4">****@163.com</td>
  139.         </tr>
  141.     </table>

用户注册

效果图

用户注册

html

  1.     <form action="" method="post">
  2.         <p><b>用户注册</b></p>
  3.         <label for="user">账号：</label>
  4.         <input type="text" name="user" id="user" placeholder="不超过八个字符"><br>
  5.         <label for="pwd">密码：</label>
  6.         <input type="password" name="pwd" id="pwd"><br>
  7.         <label for="email">邮箱：</label>
  8.         <input type="email" name="email" id="email"><br>
  9.         <label for="age">年龄：</label>
  10.         <input type="number" name="age" id="age"><br>
  11.         <label for="bsd">生日：</label>
  12.         <input type="date" name="bsd" id="bsd"><br>
  13.         <label for="ks">课程：</label>
  14.         <select name="ks" id="ks">
  15.             <option value="">--选择--</option>
  16.             <option value="">HTML5</option>
  17.             <option value="">CSS</option>
  18.             <option value="">Javascript</option>
  19.             <option value="">PHP</option>
  20.         </select>
  21.         <br>
  22.         <label for="hobby">爱好：</label>
  23.         <label><input type="checkbox" name="hobby" id="">打游戏</label>
  24.         <label><input type="checkbox" name="hobby" id="">看电影</label>
  25.         <label><input type="checkbox" name="hobby" id="">撸代码</label>
  26.         <br>
  27.         <label for="gender">性别：</label>
  28.         <label><input type="radio" name="gender" id="">男</label>
  29.         <label><input type="radio" name="gender" id="">女</label>
  30.         <label><input type="radio" name="gender" id="">保密</label>
  31.         <br>
  32.         <label for="des">简介：</label>
  33.         <textarea name="" id="" cols="30" rows="5"></textarea>
  34.         <br>
  35.         <input type="submit" value="提交">
  36.         <button>ajax</button>
  37.     </form>

更多相关文章

  1. 创建table表格和创建form表单并JS判断
  2. table和form的使用
  3. 大前端第二天第一个作业
  4. 学习，是脱贫致富的捷径
  5. 普通人打工，用创业心态干好8小时工作
  6. 工作中线程的启动
  7. 怎么在日常工作中践行逻辑思维能力？
  8. GNOME Mutter的代码清理工作将促进支持Vulkan
  9. 一个工作3年运维自我介绍话术 offer到碗里来

随机推荐

  1. android之蓝牙操作（二）
  2. Android 用MediaCodec实现视频硬解码
  3. Android四大组件之activity之间带数据跳
  4. Android中ListView多次调用getView
  5. 【Android开发】Toolbar与标题居中
  6. android线程相关1
  7. Android之WebView教程实例汇总
  8. Android控件开发之Gallery
  9. Android Studio com.android.support:per
  10. Android(安卓)使用BroadCast实现强制下线