个人简历模板web

根据自己以前使用的简单简历表格，对其进行了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的更多相关文章

转：C/C++程序员简历模板
https://github.com/geekcompany/ResumeSample/blob/master/c.md 本简历模板由国内首家互联网人才拍卖网站「 JobDeer.com 」提供. ( ...
Java程序员简历模板
背景:网上找的简历模板,自己在写简历时候可以作为参考. 本简历模板由国内首家互联网人才拍卖网站「 JobDeer.com 」提供. (括号里的是我们的顾问编写的说明,建议在简历书写完成后统一删除) 先 ...
(转)Java程序员简历模板
本简历模板由国内首家互联网人才拍卖网站「 JobDeer.com 」提供. (括号里的是我们的顾问编写的说明,建议在简历书写完成后统一删除) 先讲讲怎样才是一份好的技术简历首先,一份好的简历不光说明 ...
Bootstrap3.1开发的响应式个人简历模板
在线演示使用bootstrap3快速开发一个响应式的个人简历,如果有兴趣了解如何开发,请访问GB课程库,地址如下: Bootstrap3构建响应式前端设计师简历模板 http://www.gbtag ...
写了个简洁的Typora+Markdown简历模板
项目地址:https://github.com/CodingDocs/typora-markdown-resume (欢迎小伙伴们使用!个人能力有限,也欢迎小伙伴们一起完善这个简历模板!). 昨天在 ...
使用PowerShell找出具体某个站点所使用的模板(Web Template)名称？
$web = get-spweb –identity http://servername/sites/site/web #得到站点的对象 $web.WebTemplate #得到WebTemplate ...
DW表格的简单应用之（个人简历模板）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Flask之模板web表单
3.3 Web表单: web表单是web应用程序的基本功能. 它是HTML页面中负责数据采集的部件.表单有三个部分组成:表单标签.表单域.表单按钮.表单允许用户输入数据,负责HTML页面数据采集,通过 ...
springboot之freemarker 和thymeleaf模板web开发
Spring Boot 推荐使用Thymeleaf.FreeMarker.Velocity.Groovy.Mustache等模板引擎.不建议使用JSP. 一.Spring Boot 中使用Thymel ...

随机推荐

Python学习摘要201802
[基础]变量设计机制 [个人理解]python的变量与C++语言中的指针类似,是指向内存数据的一个引用.变量分为不可变变量string/int/float/tuple和可变变量list/dict. 对 ...
Scrapy爬虫框架第四讲(Linux环境）
下面我们来学习Selector的具体使用:(参考文档:http://scrapy-chs.readthedocs.io/zh_CN/1.0/topics/selectors.html) Selecto ...
Python（1）
Python 学习 Part1 1. 斐波那契数序列 >>> a,b=0,1 >>> a 0 >>> b 1 >>> while ...
Python_二叉树
BinaryTree.py '''二叉树:是每个节点最多有两个子树(分别称为左子树和右子树)的树结构,二叉树的第i层最多有2**(i-1)个节点,常用于排序或查找''' class BinaryTre ...
Java中判断是否为空的方法
1.判断字符串或者对象是否为空首先来看一下工具StringUtils的判断方法: 一种是org.apache.commons.lang3包下的: 另一种是org.springframework.ut ...
SVN 使用方法
svn co http://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码svn co svn://路径(目录或文件的全路径) [本地目录全路 ...
composer安装以及更新问题，配置中国镜像源。
配置国内镜像源中国镜像源 https://pkg.phpcomposer.com/ composer 中文官网地址 http://www.phpcomposer.com/ 下载 Composer 安 ...
sql server导出数据结构
http://jingyan.baidu.com/article/eae07827ad76ba1fed548573.html
Vector简单介绍
/*枚举就是Vector特有的取出方式发现枚举和迭代器很像其实枚举和迭代是一样的因为枚举的名称以及方法的名称都过长了.所以被迭代器取代了枚举郁郁而终了. */ import java.util.*;c ...
Android 打造编译时注解解析框架这只是一个开始
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43452969 ,本文出自:[张鸿洋的博客] 1.概述记得很久以前,写过几篇博客 ...

个人简历模板web

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

随机推荐

热门专题