根据自己以前使用的简单简历表格，对其进行了web前端还原，也算对自己初步学习知识的一个小小的记录。

下面是简历预览效果，很简洁的那种：

代码中没什么太困难的地方，主要记录下自己遇到的几个小问题吧：

1、最开始的简历是word版本，里面的表格线是可以很简单的拖动的，其实原简历表格效果除了外边框和第一列边框基本是整齐的，其他的边框线很杂乱，不好完全还原，要设置很多的不同宽度样式。所以我在excel表格中简单的还原了word表格，重新分配了下。最后对整个表格进行了重新规划，用table标签样式设置了整体的表格宽，然后使用table中的td标签单独设置了每个单元格的宽度占10%，最后照片占两列宽。

2、使用了<b>标签进行了加粗字体，对需要填写的简历项目进行加粗显示。

3、对于照片还有后面合并需要占多行或多列的数据使用了，<colspan>以及<rowspan>进行设置。

4、对于简历，编程能力等需要填写的内容，在相应的td中使用多段文字。并对该行设置class后单独设置样式。使用text-indent设置首行缩进，line-height设置行高等。

5、最后一个难点是行间距，采用<p>标签中的margin：5px设置。

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>莫某某个人简历</title>

    <style>

        h1{text-align: center;}

        body{text-align: center;}

        table{border:2px solid;width:720px;border-collapse: collapse;margin:0 auto;}

        table td{text-align:center;width:10%;height:50px;border:1px solid;}

        .char{text-indent: 2em;text-align: left;line-height: 1.2em;}

        p{margin: 5px auto;}

    </style>

</head>

<body>

<h1><b>某某莫个人简历</b></h1>

<table>

    <tr>

        <td><b>姓名</b></td>

        <td>某某莫</td>

        <td><b>性别</b></td>

        <td>男</td>

        <td><b>民族</b></td>

        <td>汉族</td>

        <td><b>籍贯</b></td>

        <td>湖南长沙</td>

        <td colspan="2" rowspan="3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544267836720&di=54a698c73d068dd941acb91bafa6dbc9&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20170821%2Fc0dc6fce5aa7428b90e602fb05bb70a0.jpeg" width="140" height="152"></td>

    </tr>

    <tr>

        <td><b>身份证号</b></td>

        <td colspan="3"></td>

        <td colspan="2"><b>参加工作时间</b></td>

        <td colspan="2"></td>

    </tr>

    <tr>

        <td><b>出生年月</b></td>

        <td colspan="3"></td>

        <td colspan="2"><b>资格证书</b></td>

        <td colspan="2"></td>

    </tr>

    <tr>

        <td><b>学历</b></td>

        <td></td>

        <td><b>毕业学校</b></td>

        <td colspan="2"></td>

        <td><b>专业</b></td>

        <td colspan="2"></td>

        <td><b>学位</b></td>

        <td></td>

    </tr>

    <tr>

        <td><b>身体状况</b></td>

        <td>良好</td>

        <td><b>优秀品质</b></td>

        <td colspan="3">不断学习、工作负责</td>

        <td><b>现居住地</b></td>

        <td colspan="3">长沙市</td>

    </tr>

    <tr>

        <td><b>学习经历</b></td>

        <td colspan="9" class="char">

            <p align="left">1</p>

            <p align="left">2</p>

        </td>

    </tr>

    <tr >

        <td><b>工作简历</b></td>

        <td colspan="9" class="char">

            <p><b>一、</b></p>

            <p>1</p>

            <p><b>二、</b></p>

            <p>2</p>

        </td>

    </tr>

    <tr>

        <td><b>编程能力</b></td>

        <td colspan="9" class="char">

            <p>1.</p>

            <p>2.</p>

            <p>3.</p>

            <p>4.</p>

        </td>

    </tr>

    <tr>

        <td><b>个人评价</b></td>

        <td colspan="9" class="char">

            <p>1.</p>

            <p>2.</p>

        </td>

    </tr>

</table>

</body>

</html>

个人简历模板web的更多相关文章

  1. 转：C/C++程序员简历模板

    https://github.com/geekcompany/ResumeSample/blob/master/c.md 本简历模板由国内首家互联网人才拍卖网站「 JobDeer.com 」提供. ( ...

  2. Java程序员简历模板

    背景:网上找的简历模板,自己在写简历时候可以作为参考. 本简历模板由国内首家互联网人才拍卖网站「 JobDeer.com 」提供. (括号里的是我们的顾问编写的说明,建议在简历书写完成后统一删除) 先 ...

  3. (转)Java程序员简历模板

    本简历模板由国内首家互联网人才拍卖网站「 JobDeer.com 」提供. (括号里的是我们的顾问编写的说明,建议在简历书写完成后统一删除) 先讲讲怎样才是一份好的技术简历 首先,一份好的简历不光说明 ...

  4. Bootstrap3.1开发的响应式个人简历模板

    在线演示 使用bootstrap3快速开发一个响应式的个人简历,如果有兴趣了解如何开发,请访问GB课程库,地址如下: Bootstrap3构建响应式前端设计师简历模板 http://www.gbtag ...

  5. 写了个简洁的Typora+Markdown简历模板

    项目地址:https://github.com/CodingDocs/typora-markdown-resume (欢迎小伙伴们使用!个人能力有限,也欢迎小伙伴们一起完善这个简历模板!). 昨天在 ...

  6. 使用PowerShell找出具体某个站点所使用的模板(Web Template)名称？

    $web = get-spweb –identity http://servername/sites/site/web #得到站点的对象 $web.WebTemplate #得到WebTemplate ...

  7. DW表格的简单应用 之（个人简历模板）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Flask之模板web表单

    3.3 Web表单: web表单是web应用程序的基本功能. 它是HTML页面中负责数据采集的部件.表单有三个部分组成:表单标签.表单域.表单按钮.表单允许用户输入数据,负责HTML页面数据采集,通过 ...

  9. springboot之freemarker 和thymeleaf模板web开发

    Spring Boot 推荐使用Thymeleaf.FreeMarker.Velocity.Groovy.Mustache等模板引擎.不建议使用JSP. 一.Spring Boot 中使用Thymel ...

随机推荐

  1. api大全

    免费api大全(更新中) API大全  http://www.apidq.com/    (这个碉堡了) 天气接口 气象局接口 完整数据:http://m.weather.com.cn/data/10 ...

  2. 函数上下文this

    一般来说谁调用上下文都指向谁,具体有以下几种情况: 1.函数用圆括号调用,函数的上下文是window 注意:所有的全局变量都是window的属性,而函数里边定义的变量谁的属性也不是. 2.函数作为对象 ...

  3. java(一、概念和开发工具)

    Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年正式 ...

  4. 【方案】mvc 保证定时器回收限制

    在项目中我们或多或少的遇到一些需要定时触发或者计算的东西,这个时候我们就需要定时器来作为解决方案.非常好思路清晰,业务逻辑完好,定时器也开好了,当我们信心满满的挂到IIS服务器的时候,发现写的定时器在 ...

  5. Python_小学口算题库生成器

    import random import os import tkinter import tkinter.ttk from docx import Document columnsNumber = ...

  6. DX11 Without DirectX SDK--06 DirectXMath数学库

    回到 DirectX11--使用Windows SDK来进行开发 xnamath.h原本是位于DirectX SDK的一个数学库,但是现在Windows SDK包含的数学库已经抛弃掉原来的xnamat ...

  7. VMWare的网络

    1.VMWare的网络连接方式区别 连接方式 宿主机和虚拟机 虚拟机对外网的访问 外网对虚拟机的访问 Host-Only 可以相互访问 不能直接访问 不能直接访问 NAT 虚拟机可以访问宿主机 可以( ...

  8. springboot之启动原理解析

    前言 SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说,如果不大懂SpringBoot内部启动原理,以后难免会吃亏.所以这次博主就跟你们一起一步步揭开SpringBoot的神秘面 ...

  9. capwap学习笔记——初识capwap（五）（转）

    3. CAPWAP Binding for IEEE 802.11 ¢ CAPWAP协议本身并不包括任何指定的无线技术.它依靠绑定协议来扩展对特定无线技术的支持. ¢ RFC5416就是用来扩展CAP ...

  10. SSM-SpringMVC-17：SpringMVC中深度剖析HandlerAdapter处理器适配器底层

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先放一张图 很熟悉啊,之前就看过,我们之前已经把handlerMapping剖了个底朝天,顺着上次的进度,继 ...