纯html写个个人简历！模版分享啦！！！

锁住子锁不住

已于 2024-01-15 15:06:18 修改

阅读量388

点赞数 8

分类专栏： html模板文章标签： html 前端简历模板

于 2024-01-15 14:57:54 首次发布

本文链接：https://blog.csdn.net/qqhxmdq/article/details/135601571

版权

html模板专栏收录该内容

33 篇文章 0 订阅

订阅专栏

用纯html写个个人简历！首先得先找个模板！

一个优秀模板所应该具有的素质？

简单？

仅仅一个html页面，完全没有乱七八糟，保证学的明明白白。

简单整洁？

该有的内容一个不少！

一个完美的简历！

那么，这样的模板到底有什么用呢？

1. 改一改后台显示内容，换成自己的信息。那，它就是一个美呆了的个人简历。大厂，投，投，投！

2. 程序员可以自己加些后台，做个个人简历制作网站，圆自己一个站长梦，是不是还能增加点睡后收入？

3. 初学程序员的码农小朋友们，可以学学网页制作，在这个框架横行的世代，学好基础是一件多么可贵的事情。比如我们的时间轴，统计图，都可以学它一学！

我们看看代码吧

<!DOCTYPE html>
<html>
<head>
<title>Joe xxxx - Curriculum Vitae</title>

<meta name="viewport" content="width=device-width"/>
<meta name="description" content="The Curriculum Vitae of Joe xxxx."/>
<meta charset="UTF-8"> 

<link type="text/css" rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700|Lato:400,300' rel='stylesheet' type='text/css'>

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="top">
<div id="cv" class="instaFade">
	<div class="mainDetails">
		<div id="headshot" class="quickFade">
			<img src="headshot.jpg" alt="Alan Smith" />
		</div>
		
		<div id="name">
			<h1 class="quickFade delayTwo">Joe xxxx</h1>
			<h2 class="quickFade delayThree">Job Title</h2>
		</div>
		
		<div id="contactDetails" class="quickFade delayFour">
			<ul>
				<li>e: <a href="mailto:joe@xxxx.com" target="_blank">joe@xxxx.com</a></li>
				<li>w: <a href="http://www.xxxx.com">www.xxxx.com</a></li>
				<li>m: 01234567890</li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>
	
	<div id="mainArea" class="quickFade delayFive">
		<section>
			<article>
				<div class="sectionTitle">
					<h1>Personal Profile</h1>
				</div>
				
				<div class="sectionContent">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor metus, interdum at scelerisque in, porta at lacus. Maecenas dapibus luctus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa et erat luctus hendrerit. Curabitur non consequat enim. Vestibulum bibendum mattis dignissim. Proin id sapien quis libero interdum porttitor.</p>
				</div>
			</article>
			<div class="clear"></div>
		</section>
		
		
		<section>
			<div class="sectionTitle">
				<h1>Work Experience</h1>
			</div>
			
			<div class="sectionContent">
				<article>
					<h2>Job Title at Company</h2>
					<p class="subDetails">April 2011 - Present</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa et erat luctus hendrerit. Curabitur non consequat enim. Vestibulum bibendum mattis dignissim. Proin id sapien quis libero interdum porttitor.</p>
				</article>
				
				<article>
					<h2>Job Title at Company</h2>
					<p class="subDetails">Janruary 2007 - March 2011</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa et erat luctus hendrerit. Curabitur non consequat enim. Vestibulum bibendum mattis dignissim. Proin id sapien quis libero interdum porttitor.</p>
				</article>
				
				<article>
					<h2>Job Title at Company</h2>
					<p class="subDetails">October 2004 - December 2006</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa et erat luctus hendrerit. Curabitur non consequat enim. Vestibulum bibendum mattis dignissim. Proin id sapien quis libero interdum porttitor.</p>
				</article>
			</div>
			<div class="clear"></div>
		</section>
		
		
		<section>
			<div class="sectionTitle">
				<h1>Key Skills</h1>
			</div>
			
			<div class="sectionContent">
				<ul class="keySkills">
					<li>A Key Skill</li>
					<li>A Key Skill</li>
					<li>A Key Skill</li>
					<li>A Key Skill</li>
					<li>A Key Skill</li>
					<li>A Key Skill</li>
					<li>A Key Skill</li>
					<li>A Key Skill</li>
				</ul>
			</div>
			<div class="clear"></div>
		</section>
		
		
		<section>
			<div class="sectionTitle">
				<h1>Education</h1>
			</div>
			
			<div class="sectionContent">
				<article>
					<h2>College/University</h2>
					<p class="subDetails">Qualification</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa et erat luctus hendrerit. Curabitur non consequat enim.</p>
				</article>
				
				<article>
					<h2>College/University</h2>
					<p class="subDetails">Qualification</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa et erat luctus hendrerit. Curabitur non consequat enim.</p>
				</article>
			</div>
			<div class="clear"></div>
		</section>
		
	</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3753241-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>

那么，这么优雅的模板完整版，在哪儿下载呢？

https://download.csdn.net/download/qqhxmdq/88744180

一起来快乐的玩耍吧！！！

锁住子锁不住

关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
纯html写个个人简历！模版分享啦！！！

3. 初学程序员的码农小朋友们，可以学学网页制作，在这个框架横行的世代，学好基础是一件多么可贵的事情。比如我们的时间轴，统计图，都可以学它一学！2. 程序员可以自己加些后台，做个个人简历制作网站，圆自己一个站长梦，是不是还能增加点睡后收入？1. 改一改后台显示内容，换成自己的信息。那，它就是一个美呆了的个人简历。仅仅一个html页面，完全没有乱七八糟，保证学的明明白白。那么，这么优雅的模板完整版，在哪儿下载呢？那么，这样的模板到底有什么用呢？一起来快乐的玩耍吧！该有的内容一个不少！
复制链接

扫一扫