根据自己以前使用的简单简历表格，对其进行了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. visual studio中如何将string类型值转为BYTE(unsigned char)类型

    昨天困惑一件事,就是手里有个string类型的字符串,像01 23 45 67 89 AB CD EF,根据空格拆分为一个个的子字符串后(如EF),需要放到一个BYTE(typedef unsigne ...

  2. 分布式服务通讯框架XXL-RPC

    <分布式服务通讯框架XXL-RPC>    一.简介 1.1 概述 XXL-RPC 是一个分布式服务通讯框架,提供稳定高性能的RPC远程服务调用功能.现已开放源代码,开箱即用. 1.2 特 ...

  3. 第三章 C++的三种基本控制结构

    0x C++提供的三种基本控制结构 顺序结构:按照先后顺序依次执行程序中的语句 选择结构:按照给定条件有选择地执行程序中的语句 循环语句:按照给定规则重复地执行程序中的语句 1x 第一节 C++语句 ...

  4. java I/O流详解

    概况 I/O流主要分为二大类别:字符流和字节流. 字节流(基本流) 1.字节输入流    类名:FileInputStream    特点:读(对文件进行读取操作)    父类:InputStream ...

  5. python__基础 : 类的__init__,__str__,__del__方法

    __init__:当实例化一个类的时候,首相会执行__new__方法创建一个对象,接下来会执行__init__方法对对象的一些属性进行初始化. 所以如果对象有属性,一般会直接写在__init__方法里 ...

  6. 不使用JavaScript实现菜单的打开和关闭

    我在写有菜单栏的网页时,基本都会用响应式设计来适配移动端,例如把不重要的菜单选项隐藏,或者创建一个菜单按钮来控制的菜单的打开和关闭之类的.而我之前一直是使用JavaScript来实现菜单的打开和关闭的 ...

  7. Unity3D学习（二）：使用JSON进行对象数据的存储读取

    前言 前段时间完成了自己的小游戏Konster的制作,今天重新又看了下代码.原先对关卡解锁数据的存储时用了Unity自带的PlayerPref(字典式存储数据). 读取关卡数据的代码: void Aw ...

  8. Spring Cloud Eureka Server高可用注册服务中心的配置

    前言 Eureka 作为一个云端负载均衡,本身是一个基于REST的服务,在 Spring Cloud 中用于发现和注册服务. 那么当成千上万个微服务注册到Eureka Server中的时候,Eurek ...

  9. Unity文档阅读 第一章 入门

    Before you learn about dependency injection and Unity, you need to understand why you should use the ...

  10. js判断浏览器是否支持flash的方法

    传统浏览器可以使用window.ActiveXObject检查浏览器是否启用相关的控件.检查浏览器是否启用flash控件,需要先检查浏览器是否支持ActiveXObject,可以使用typeof检查w ...