网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
优秀的简历需要具备哪些要素?1、逻辑清晰、有条有理。HR面临的动辄几百上千份简历,简历需要在5秒内让HR能够get到所有重要信息。2、重点突出,简历有亮点用成绩说话!奖学金,荣誉奖项等内容必不可少。3、目标明确,直戳需求有匹配的技能证书,但是不能贪多,把握住重点。4、研究公司,做到知己知彼明确你应聘的岗位是什么?你的公司需要什么样的人?5、排版简洁,有一定个人特色排版色彩简单,低饱和度,简历色彩不能超过3种。
本文教你使用html+css做一个简洁的简历模板,里面的内容自己更改。
网页效果(适配手机和电脑端):
需要本文完整项目的朋友可以去下载—>>>求职简历html模板
当然我这里还有word版本,效果图如下:
word版下载地址—>>>求职简历模板word版
html代码:
只有html代码是不够的,还要有很多css,这里放不下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>应届生求职简历模板</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/new.css" media="all"/>
<link rel="stylesheet" href="css/bootstrap.min.css?v=2159" />
<link rel="stylesheet" href="css/zxbj\_base.css?v=2818" />
<link rel="stylesheet" href="css/jm0203.css" />
<style>
.m-nav-ul .nav\_li:nth-child(3) a.erji\_a {
color: #F66000;
}
.m-nav-ul .nav\_li:nth-child(3) a.triangle {
border-color: #F66000;
}
.m-top\_user li a {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
.m-erjinav-ul {
margin-top: 25px;
}
</style>
</head>
<body style="height:auto;background:#f8f8f8;">
<div class="n\_dispage\_jm">
<div class="n\_dispage\_jm\_in resetEditStyle">
<!--编辑区域-->
<div class="baseStyle clearfix jm0203\_j1" id="resume\_body">
<div class="divLeft clearfix" id="bar">
<!--头像-->
<div data-toggle="modal" data-target="#myModalHead" class="headDiv" id="resume\_head"> <span class="headNotice">点击替换头像</span> <img class="resume\_head" src="images/照片.jpg" height="200" /> </div>
<div id="bar\_sort"></div>
<!--基本信息-->
<div class="msgDiv positonDiv resume\_add\_area resume\_sort" id="resume\_msg">
<ul class="editBtn">
<li class="btnMove" style="cursor:move;"data-placement="top" title="拖动调整上下位置"></li>
<li class="btnPlus resume\_add" for-key="resume\_msg" data-placement="bottom" title="添加一项"></li>
</ul>
<div class="baseAge baseMsg baseDel" id="resume\_age">
<div class="delete resume\_hidden" for-id="resume\_age"></div>
<a class="resume\_icon\_diy icon wbdfont" for-id="age" style="font-size:none"></a>
<input class="baseBorder resume\_msg resume\_lang\_age" for-key="age" placeholder="年龄/生日" value="22岁" />
</div>
<div class="baseAddress baseMsg baseDel" id="resume\_address">
<div class="delete resume\_hidden" for-id="resume\_address"></div>
<a class="resume\_icon\_diy icon wbdfont" for-id="address" style="font-size:none"></a>
<input class="resume\_msg baseBorder resume\_lang\_address" for-key="address" placeholder="联系地址" value="广东省广州市" />
</div>
<div class="baseMobile baseMsg baseDel" id="resume\_mobile">
<div class="delete resume\_hidden" for-id="resume\_mobile"></div>
<a class="resume\_icon\_diy icon wbdfont" for-id="mobile" style="font-size:none"></a>
<input class="resume\_msg baseBorder resume\_lang\_mobile" for-key="mobile" placeholder="联系电话" value="13588888888" />
</div>
<div class="baseEmail baseMsg baseDel" id="resume\_email">
<div class="delete resume\_hidden" for-id="resume\_email"></div>
<a class="resume\_icon\_diy icon wbdfont" for-id="email" style="font-size:none"></a>
<input class="resume\_msg baseBorder resume\_lang\_email" for-key="email" placeholder="电子邮箱" value="pxh@163.com" />
</div>
</div>
<!--个人技能-->
<div class="skillDiv positonDiv resume\_add\_area resume\_graph resume\_sort" id="resume\_graph">
<ul class="editBtn">
<li class="btnMove" style="cursor:move;"data-placement="top" title="拖动调整上下位置"></li>
<li class="btnPlus resume\_add" for-key="resume\_graph" data-placement="bottom" title="添加一项"></li>
<li class="btnDel resume\_hidden" for-id="resume\_graph" data-placement="bottom" title="隐藏该模块"></li>
</ul>
<ul class="skillUl resume\_append\_area">
<li class="baseDel resume\_delete\_area resume\_graph\_item">
<div class="skillTitle">
<input class="resume\_value baseBorder" for-key="resume\_skill\_graph" placeholder="填写你的技能名称" value="html/css/js" />
</div>
<span><i class="resume\_line" for-id="resume\_skill\_graph" style="width:128px;border-top-style:solid;border-top-width:8px;"></i></span>
<div class="delete resume\_delete"></div>
</li>
<li class="baseDel resume\_delete\_area resume\_graph\_item">
<div class="skillTitle">
<input class="resume\_value baseBorder" for-key="53815fa3293e57988958e27243b16870" placeholder="填写你的技能名称" value="C++" />
</div>
<span><i class="resume\_line" for-id="53815fa3293e57988958e27243b16870" style="width:128px;border-top-style:solid;border-top-width:8px;"></i></span>
<div class="delete resume\_delete"></div>
</li>
<li class="baseDel resume\_delete\_area resume\_graph\_item">
<div class="skillTitle">
<input class="resume\_value baseBorder" for-key="0fb2de17b37fd50c14ccda4d9b96bd94" placeholder="填写你的技能名称" value="交互设计" />
</div>
<span><i class="resume\_line" for-id="0fb2de17b37fd50c14ccda4d9b96bd94" style="width:128px;border-top-style:solid;border-top-width:8px;"></i></span>
<div class="delete resume\_delete"></div>
</li>
<li class="baseDel resume\_delete\_area resume\_graph\_item">
<div class="skillTitle">
<input class="resume\_value baseBorder" for-key="0bab43524d96b1b58129f46097ee14b7" placeholder="填写你的技能名称" value="英语(CET-6)" />
</div>
<span><i class="resume\_line" for-id="0bab43524d96b1b58129f46097ee14b7" style="width:128px;border-top-style:solid;border-top-width:8px;"></i></span>
<div class="delete resume\_delete"></div>
</li>
</ul>
</div>
<!--兴趣爱好-->
<div class="hobbyDiv positonDiv resume\_add\_area resume\_icon resume\_sort" id="resume\_icon">
<ul class="editBtn">
<li class="btnMove" style="cursor:move;"data-placement="top" title="拖动调整上下位置"></li>
<li class="btnPlus resume\_add" for-key="resume\_icon" data-placement="bottom" title="添加一项"></li>
<li class="btnDel resume\_hidden" for-id="resume\_icon" data-placement="bottom" title="隐藏该模块"></li>
</ul>
<dl class="clearfix">
<dt><span>
<div class="resume\_lang\_hobby">兴趣爱好</div>
</span></dt>
<dd class="resume\_append\_area">
<div class="hobbyicon baseDel resume\_delete\_area resume\_icon\_item"> <img src="images/篮球.png" width="50px" height="50px" style="margin:10px"/> <span class="hobbyTitle">
<input class="resume\_value baseBorder" for-key="resume\_hobby\_icon" placeholder="兴趣爱好" value="篮球" />
</span>
<div class="delete resume\_delete"></div>
</div>
<div class="hobbyicon baseDel resume\_delete\_area resume\_icon\_item"> <img src="images/足球.png" width="50px" height="50px" style="margin:10px"/><span class="hobbyTitle">
<input class="resume\_value baseBorder" for-key="9eff2552587f9d5970ebab85696208dc" placeholder="兴趣爱好" value="足球" />
</span>
<div class="delete resume\_delete"></div>
</div>
<div class="hobbyicon baseDel resume\_delete\_area resume\_icon\_item"> <img src="images/游戏.png" width="50px" height="50px" style="margin:10px"/> <span class="hobbyTitle">
<input class="resume\_value baseBorder" for-key="162b8459a4a82554da5e6a12c2f21c8f" placeholder="兴趣爱好" value="游戏" />
</span>
<div class="delete resume\_delete"></div>
</div>
<div class="hobbyicon baseDel resume\_delete\_area resume\_icon\_item"> <img src="images/摄影.png" width="50px" height="50px" style="margin:10px"/> <span class="hobbyTitle">
<input class="resume\_value baseBorder" for-key="b3cf5ddaec3cbe67762a2d8d3df17f17" placeholder="兴趣爱好" value="摄影" />
</span>
<div class="delete resume\_delete"></div>
</div>
</dd>
</dl>
</div>
</div>
<div class="divRight clearfix resume\_main" id="foo">
<!--姓名、求职意向-->
<div class="nameDiv positonDiv" id="resume\_name">
<h1>
<div class="resume\_msg baseBorder resume\_notice resume\_lang\_name" notice-key="msg" for-key="name" for-value="html" contenteditable="true">姓名</div>
</h1>
<h2>
<div class="resume\_msg baseBorder resume\_notice resume\_lang\_job" notice-key="job" for-key="job" for-value="html" contenteditable="true">求职目标:前端开发工程师</div>
</h2>
</div>
<div id="foo\_sort"></div>
<!--教育背景-->
<div class="eduDiv baseItem positonDiv resume\_item resume\_add\_area resume\_sort resume\_notice" notice-key="edu" id="resume\_edu" for-key="edu">
<ul class="editBtn">
<li class="btnMove" style="cursor:move;"data-placement="top" title="拖动调整上下位置"></li>
<li class="btnPlus resume\_add" for-key="resume\_item" data-placement="bottom" title="添加一项"></li>
<li class="btnDel resume\_hidden" for-id="resume\_edu" data-placement="bottom" title="隐藏该模块"></li>
</ul>
<dl>
<dt> <a class="resume\_icon\_diy icon wbdfont" for-id="edu" style="font-size:none"></a> <span>
<div class="resume\_lang\_edu">教育经历</div>
<div class="Border resume\_line" for-id="edu" style="width:668px;border-top-style:solid;border-top-width:2px;"></div>
</span> </dt>
<dd class="resume\_append\_area">
<div class="baseContent baseDel resume\_item\_items resume\_delete\_area">
<div class="delete resume\_delete"></div>
<div class="conTitle"> <span class="conTitle\_time">
<div class="resume\_time baseBorder" contenteditable="true">2018.09-2022.07</div>
</span> <span class="conTitle\_company">
<div class="resume\_unit baseBorder" contenteditable="true">北京大学</div>
</span> <span class="conTitle\_post">
<div class="resume\_job baseBorder" contenteditable="true">软件工程(本科)</div>
</span> </div>
<div class="baseDel\_ resume\_delete\_area\_">
<div class="delete\_ resume\_delete\_"></div>
<div class="conDisc baseBorder baseDel resume\_value" contenteditable="true" data-toggle="tooltip" data-placement="top" title="复制粘贴文字请右键-粘贴为纯文本">
![img](https://img-blog.csdnimg.cn/img_convert/f05117c084651ecd63a449560775739e.png)
![img](https://img-blog.csdnimg.cn/img_convert/bd0c5a8f0ca7cc885c129b254d515c87.png)
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化的资料的朋友,可以添加戳这里获取](https://bbs.csdn.net/topics/618658159)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**
资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化的资料的朋友,可以添加戳这里获取](https://bbs.csdn.net/topics/618658159)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**