根据自己以前使用的简单简历表格，对其进行了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. Oracle VM VirtualBox(一) 快速拷贝一个新的虚拟机

    快速拷贝一个新的虚拟机 一 找到虚拟机vdi文件,复制一份并重命名. 二 修改新虚拟机的UUID 注:不修改创建不了虚拟机,会抛出Oracle VM VirtualBox UUID already e ...

  2. JS前端调用后台方法

    //JS前端代码function Exportqmdltb() { var areavalue= GetQmdltmValue(); $.ajax({ type: "post", ...

  3. 用Maven实现一个protobuf的Java例子

    注:试验环境在Mac Idea环境下 1. 介绍Protocol Buffers Protocal Buffers(简称protobuf)是谷歌的一项技术,用于结构化的数据序列化.反序列化,常用于RP ...

  4. 关于JAVA中异常处理的简单阐释.

    ---恢复内容开始--- 这是我的一篇要在博客园发布的随笔,主要是简单的概括一下我本次所学的关于异常处理的知识.有讲的不妥当的地方,或者有需要补充的,还请各位高人给指点,共同学习,虚心求学.谢谢啦~ ...

  5. java 字符串池【转】

    java 字符串池 java运行环境有一个字符串池.比如String str="abc"时,会首先查看字符串池中是否存在字符串"abc",如果存在则直接将&qu ...

  6. Java学习方向

    又过了一段日子了,项目比之前要熟悉很多了,有很多要学的东西要提上日程了. 个人感觉java基础很重要,只有基础扎实了,才能更好的写出代码和提升自己,需要好好的学习,以下是大概需要学习的方向 # jav ...

  7. 免费Git客户端：sourcetree详细介绍

    一.简介:一个用于Windows和Mac的免费Git客户端.Sourcetree简化了如何与Git存储库进行交互,这样您就可以集中精力编写代码.通过Sourcetree的简单Git GUI可视化和管理 ...

  8. .NET开发微信小程序-Template模块开发

    1.添加一个文件目录,里面放模板信息 例:我在根目录添加一个文件夹:template 然后在这个文件夹下面添加相应的页面.比如我添加一个promodel.wxml文件.主要是放商品相关的模块信息(注: ...

  9. SpringBoot开发案例从0到1构建分布式秒杀系统

    前言 ​最近,被推送了不少秒杀架构的文章,忙里偷闲自己也总结了一下互联网平台秒杀架构设计,当然也借鉴了不少同学的思路.俗话说,脱离案例讲架构都是耍流氓,最终使用SpringBoot模拟实现了部分秒杀场 ...

  10. centos tftp和samba的安装与配置

    Tftp服务器的安装于配置 1 安装: 命令:#yum –y install tftp 2 安装完毕之后,将tftp服务器设置为开机启动,方法:(命令)#setup→选择system server→选 ...