利用HTML和CSS做的简历模板

样例

小图标的下载地址：https://www.iconfont.cn/
下载地址：http://download.csdn.net/download/olivia12344321/19098756?spm=1001.2014.3001.5501

代码

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简历模板</title><link rel="stylesheet" href="./简历模板.css" >
</head>
<body>
<div><span id="personname">XXX</span><br><br>
<span><span><img src="./图片/电话.svg" class="pimg"><span class="ptext" id="tel">电话:159XXXXXXX</span></span><span class="pspan"><img src="./图片/邮箱.svg" class="pimg"><span class="ptext" >邮箱:XXXXXX@qq.com</span></span><br><br><span><img src="图片/日历.svg" class="pimg"><span class="ptext">出生年月：2000.01</span></span><span class="pspan"><img src="./图片/毕业证.svg" class="pimg"><span class="ptext">学历:本科</span></span>
</span><br><br>
<span ><img src="./图片/01.jpg" id="personimg1" >
</span>
</div><div class="cla"><div class="subtitle"><img  src="./图片/教育.svg" class="subtitle-img"><span class="subtitle-text">教育背景</span></div><hr><div class="middle"><span class="text">XXX-XXXX</span><span class="text" id="school">XXX大学</span><span class="text" style="float: right">计算机科学与技术</span></div><div><span class="text"><b>主修课程：</b>数据结构，计算机网络，操作系统，计算机组成原理，Java语言程序设计基础，编译原理，现代数据库，程序设计基础，计算机科学导论，计算机专业英语，高等数学，线性代数等</span></div>
</div><div class="cla"><div class="subtitle"><img  src="./图片/计算机水平.svg" class="subtitle-img"><span class="subtitle-text">专业技能</span></div><hr><ul><li>XXX</li><li>XXX</li><li>XXX</li><li>XXX</li><li>XXX</li></ul>
</div>
<div class="cla"><div class="subtitle"><img  src="./图片/设置.svg" class="subtitle-img"><span class="subtitle-text">项目经验</span></div><hr><div class="middle"><span class="text">XXX-XXXX项目</span><span class="text" style="float: right">时间</span></div><div><span class="text"><b>开发环境：</b> XXX</span></div><div><span class="text"><b>项目描述：</b> XXX</span></div><div><span class="text"><b>主要职责：</b> XXX</span></div><br>
<div class="cla"><div><img  src="./图片/奖状，勋章，荣誉，证书.svg" class="subtitle-img"><span class="subtitle-text">荣誉证书</span></div><hr><ol><li><span class="text">XX</span><span class="R"  >2021年</span></li><li><span class="text">XX</span><span class="R"  >2020年</span></li><li><span class="text">XX</span><span class="R"  >2020年</span></li><li><span class="text">XX</span><span class="R"  >2019年</span></li><li><span class="text">XX</span><span class="R"  >2019年</span></li><li><span class="text">XX</span><span class="R"  >2019年</span></li></div><div><div><img  src="./图片/目标.svg" class="subtitle-img"><span class="subtitle-text">自我介绍</span></div><hr><span class="text">XXXX</span>
</div></body>
</html>

CSS

#personname{color: #3faadb;font-family: 楷体;font-size: 35px;}
.pimg{width:20px;height: 20px;
}.ptext{font-weight: bold;
}
.pspan{margin-left: 50px;
}
#personimg1{width: 120px;height: 160px;position: absolute;top:0px;right: 0px;
}.subtitle-text{font-size: 20px;font-weight: bold;margin-left: 10px;
}hr{size:15px;color: black;border-bottom:none;
}.cla{margin-bottom: 15px;
}
#school{margin-left: 25%;
}
.middle{margin-bottom: 3px;
}.R{float: right
}.subtitle-img{width:25px;height: 25px;
}

如何打印

以Chrome为例
右击，选择打印

注意将页面和页脚选项删除
目标打印机选择：Micorosoft Print to PDF

利用HTML和CSS做的简历模板相关推荐

利用PHP表单做一个简历模块
<!DOCTYPE HTML> <html> <body> 头像部分: <?php header('Content-type:text/html;charse ...
用HTML和CSS编辑的简历模板
1. 工具: sublime或者EditPlus.任意浏览器 2. 代码文件点击提取密码: 5ee7 3. 效果
【简历】这是一款我个人制作的简历模板
这是一款我个人做的简历模板大家可以参考一下,大概长这样: 觉得不错的同学可以拿去做简历,有模板修改建议的师傅可以直接在评论指出!谢谢!!! 自我评价如下: 工作上有上进心,喜欢钻研新框架与新技术,热 ...
html css在线申请页面,25个在线工作申请免费HTML的简历模板
几个星期前,我们发布的制作了HTML创意高端品牌全新的完全免费的简历模板列表.这个基于HTML的简历模板,它有很多超过基于文本和基于图像的优点.这些简历的主要特点是添加了一些动态效果,以及提供反向链接 ...
手机怎么做个人简历？多行业简历模板自由选择
如何利用手机来制作简历呢?现在找工作的时候,大多会使用手机来查看各种招聘app软件的信息来选择自己喜欢的工作.那么为了能够更好的获取面试的机会,那么准备一份优质的个人简历是必不可少的,那么从手机上如何 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
如何在html中加入柱状图,利用DIV+CSS做的柱状图（3）
利用DIV+CSS做的柱状图(3) .chart { font-family: Tahoma; font-size: 12px; border: 1px solid #ccc; float: left ...
手机怎么从网上下载简历模板？如何在手机上做简历？
在手机上编辑个人简历时,相信很多小伙伴都会从浏览器中来选择简历模板下载,但是很多的网站下载简历总是会附带很多杂七杂八的东西,想要删除的时候找不到文件位置,那么有什么其他的方法能下载简历模板吗?下面小编 ...
怎么用小程序做简历？简历模板如何在线下载？
怎么从手机上做一份个人简历呢?现在找工作的时候,都需要准备好自己的个人简历,虽然一般公司都会有自己的简历表格,但是自己制作的简历模板能够更好的展示自己,而且也可以节省面试官的时间,那么如何不通过电脑, ...

利用HTML和CSS做的简历模板

样例

代码

HTML

CSS

如何打印

利用HTML和CSS做的简历模板相关推荐

最新文章

热门文章