个人简历模板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 ...

随机推荐

maven仓库添加jar架包
推荐几个好的 Maven 常用仓库网址:http://mvnrepository.com/http://search.maven.org/http://repository.sonatype.org/ ...
【python进阶】深入理解系统进程2
前言在上一篇[python进阶]深入理解系统进程1中,我们讲述了多任务的一些概念,多进程的创建,fork等一些问题,这一节我们继续接着讲述系统进程的一些方法及注意点 multiprocessing ...
Java并发之AQS详解
一.概述谈到并发,不得不谈ReentrantLock:而谈到ReentrantLock,不得不谈AbstractQueuedSynchronizer(AQS)! 类如其名,抽象的队列式的同步器,AQ ...
CentOS 6 安装HBase集群教程
hbase0.99.2安装包下载(链接:https://pan.baidu.com/s/1dR-HB3P6mzsXVW6sLI8uxQ 密码:4g1n) 首先需要安装 zookeeper(点击查看) ...
Java(五、类和对象中的例题）
一.方法中的参数为数值型的(int) import java.util.Scanner; public class ScoreCalc { public void calc(int num1,int ...
Python_eval()
''' eval()用来把任意字符串转化为Python表达式并进行求值 ''' print(eval('3+4')) #计算表达式的值 a=3 b=4 print(eval('a+b')) #这时候要 ...
JDK1.8的新特性
JAVA8新特性接口改善现在接口里已经完全可以定义静态方法了. 举一个比较普遍的例子就是在java类库中, 对于一些接口如Foo, 都会有一个有静态方法的工具类Foos 来生成或者配合Foo对象实 ...
ubuntukylin18.04Lts和deepin15.5与win10 1803双系统安装
我首先安装的是ubuntu kylin(中文名优麒麟) 1.计算机右键选择管理磁盘,压缩卷设置空闲空间(第7步分区用) 2.重启时fn+f1进入bios设置界面. 3.关闭安全模式和快速启动,将boo ...
深夜学算法之SkipList：让链表飞
1. 前言上次写Python操作LevelDB时提到过,有机会要实现下SkipList.摘录下wiki介绍: 跳跃列表是一种随机化数据结构,基于并联的链表,其效率可比拟二叉查找树. 我们知道对于有序 ...
java基础之接口（抽象类与接口的区别）
概述猫狗案例,我们想想狗一般就是看门,猫一般就是作为宠物了,对不.但是,现在有很多的驯养员或者是驯的,这应该属于经过特殊的培训训练出来的,对不.所以,这些额外的动作定义到动物类中就不合适,也不适合直 ...

个人简历模板web

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

随机推荐

热门专题