介绍
职业生涯规划课要交一份简历作业
找了份 Word 模板，但我不会排版，改起内容来不方便
于是我用 HTML 和 CSS 复刻了一份
浏览器中按 Ctrl + P 可将页面打印成 PDF
效果展示
<script>
const iframe = document.querySelector('iframe#my_resume');
const iframe_doc = iframe.contentDocument || iframe.contentWindow.document;
iframe_doc.open();
/* ------------------------------------------------------------------------ */
iframe_doc.write(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简历</title>
<style>
#my_resume {
--my-primary-color: #649a98;
width: 900px;
margin: 0 auto;
font-size: 17px;
line-height: 1.7em;
font-family: "Microsoft YaHei", sans-serif;
}
#my_resume section > h2 {
letter-spacing: 4px;
font-weight: 600;
font-size: 1.1em;
white-space: nowrap;
width: fit-content;
margin: 0;
padding: 0 22px 2px 8px;
background-color: var(--my-primary-color);
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
color: #fff;
position: relative;
bottom: -2px;
}
#my_resume section > article {
padding: 2px 10px 0 10px;
border-top: 3px solid var(--my-primary-color);
}
#my_resume h3 {
margin: 0;
font-size: 1em;
font-weight: 600;
}
#my_resume table {
border-collapse: collapse;
border-spacing: none;
}
#my_resume table th {
text-align-last: justify;
vertical-align: top;
white-space: nowrap;
padding-right: 1em;
}
#my_resume table th::after {
content: "：";
position: absolute;
}
#my_resume p {
margin: 0;
padding: 0;
}
#my_resume em {
font-style: normal;
font-weight: 600;
}
#my_resume ul {
margin: 0;
padding: 0;
list-style: none;
}
#my_resume hr {
margin: 0.4em 0;
border: 1px solid var(--my-primary-color);
}
#my_resume a { color: #333993; text-decoration: underline; }
#my_resume a:hover { color: orange; }
.my_horizontal_divider {
position: relative;
--line-width: 8px;
--left-color: var(--my-primary-color);
--right-color: var(--my-primary-color);
}
.my_horizontal_divider::before {
content: "";
display: block;
height: var(--line-width);
width: 50%;
background-color: var(--left-color);
clip-path: polygon(0 0, calc(100% - var(--line-width)) 0, 100% 100%, 0 100%);
}
.my_horizontal_divider::after {
content: "";
display: block;
height: var(--line-width);
width: 50%;
background-color: var(--right-color);
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--line-width) 100%);
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<article id="my_resume">
<header>
<div class="my_horizontal_divider" style="--left-color: #ada154; margin: 8px 0;"></div>
</header>
<section>
<h2>个人信息</h2>
<article style="display: flex; position: relative; align-items: start;">
<table>
<tr><th>姓名</th><td>xxxxxxxx</td></tr>
<tr><th>出生年月</th><td>xxxx-xx</td></tr>
<tr><th>电话</th><td>xxxxxxxxxxx</td></tr>
<tr><th>邮箱</th><td>xxxxxxxx@xxxx.xxxx</td></tr>
<tr><th>个人博客</th><td>
<a href="" target="_blank">xxxx.xxxx</a>
</td></tr>
</table>
<table style="margin-left: 120px;">
<tr><th>毕业学校</th><td>xxxx</td></tr>
<tr><th>专业</th><td>软件工程</td></tr>
<tr><th>学分绩</th><td>xxxx</td></tr>
<tr><th>排名</th><td>xxxx</td></tr>
<tr><th>英语能力</th><td>xxxx</td></tr>
</table>
<img style="
position: absolute; right: 30px; top: 8px;
width: 120px; height: 170px;
border: 1px solid var(--my-primary-color)"
draggable="false"
src="">
</article>
</section>
<section id="education">
<style>
#education table { width: 100%; }
#education td:nth-child(2n) { width: 1.5em; position: relative; left: -1em; }
#education td:nth-child(2n + 1)::after { content: "："; }
</style>
<h2>教育背景</h2>
<article>
<table>
<tr>
<td>计算机科学导论</td><td>xx</td>
<td>程序设计与问题求解</td><td>xx</td>
<td>高等数学A1</td><td>xx</td>
<td>高等数学A2</td><td>xx</td>
<td>线性代数</td><td>xx</td>
</tr>
<tr>
<td>数据结构与算法</td><td>xx</td>
<td>计算机组成原理B</td><td>xx</td>
<td>操作系统</td><td>xx</td>
<td>算法设计与分析</td><td>xx</td>
<td>离散数学</td><td>xx</td>
</tr>
<tr>
<td>数据库系统原理A</td><td>xx</td>
<td>软件工程与UML</td><td>xx</td>
<td>软件测试</td><td>xx</td>
<td>计算机网络</td><td>xx</td>
<td>编译原理</td><td>xx</td>
</tr>
</table>
</article>
</section>
<section>
<h2>专业技能</h2>
<article>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iusto cum!ad, szdxdxdx
amet numquam quo culpa. Maxime, molestiae ab. Eum aut accusamus nostrum! Nam eius ex porro
dignissimos, placeat corrupti expedita mollitia commodi sequi accusantium Dolor error
</p>
</article>
</section>
<section id="project_experience">
<style>
#project_experience h3 { position: relative; }
#project_experience h3 > time { position: absolute; left: 460px; }
#project_experience h3 > span { position: absolute; right: 0; }
#project_experience table { margin-left: 20px; }
</style>
<h2>项目经历</h2>
<article>
<h3>xxxx项目<time>20xx年 x 月 ~ 20xx 年 x 月</time><span>xx职责</span></h3>
<table>
<tr><th>项目描述</th><td>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, accusamus.</td></tr>
<tr><th>承担工作</th><td>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus eos nihil dolores
modi, illo nisi excepturi ipsa, quos iste deserunt ex, tenetur ut amet temporibus
doloremque? Nemo numquam atque eum!</td>
<tr><th>相关技术</th><td>xxxx、xxxx、xxxx、xxxx、xxxx、xxxx</td></tr>
<tr><th>项目成果</th><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque tempore</td></tr>
</table>
<hr>
<h3>xxxx项目<time>20xx年 x 月 ~ 20xx 年 x 月</time><span>xx职责</span></h3>
<table>
<tr><th>项目描述</th><td>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, accusamus.</td></tr>
<tr><th>承担工作</th><td>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus eos nihil dolores
modi, illo nisi excepturi ipsa, quos iste deserunt ex, tenetur ut amet temporibus
doloremque? Nemo numquam atque eum!</td>
<tr><th>相关技术</th><td>xxxx、xxxx、xxxx、xxxx、xxxx、xxxx</td></tr>
<tr><th>项目成果</th><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque tempore</td></tr>
</table>
<hr>
<h3>xxxx项目<time>20xx年 x 月 ~ 20xx 年 x 月</time><span>xx职责</span></h3>
<table>
<tr><th>项目描述</th><td>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, accusamus.</td></tr>
<tr><th>承担工作</th><td>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus eos nihil dolores
modi, illo nisi excepturi ipsa, quos iste deserunt ex, tenetur ut amet temporibus
doloremque? Nemo numquam atque eum!</td>
<tr><th>相关技术</th><td>xxxx、xxxx、xxxx、xxxx、xxxx、xxxx</td></tr>
<tr><th>项目成果</th><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque tempore</td></tr>
</table>
</article>
</section>
<section id="honors_and_awards">
<style>
#honors_and_awards li > time { display: inline-block; min-width: 130px; }
</style>
<h2>荣誉奖励</h2>
<article>
<ul>
<li><time>20xx 年 xx 月</time>第xx届xx大赛xx等奖</li>
<li><time>20xx 年 xx 月</time>第xx届xx大赛xx等奖</li>
<li><time>20xx 年 xx 月</time>第xx届xx大赛xx等奖</li>
<li><time>20xx 年 xx 月</time>第xx届xx大赛xx等奖</li>
</ul>
</article>
</section>
</article>
</body>
</html>
`);
/* ------------------------------------------------------------------------ */
iframe_doc.close();
</script>
代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简历</title>
<style>
/* ------------------------------------------------------------------------ */
/* 整体配置 */
#my_resume {
--my-primary-color: #649a98; /* 主题色 */
width: 900px;
margin: 0 auto;
font-size: 17px;
line-height: 1.7em;
font-family: "Microsoft YaHei", sans-serif;
}
/* ------------------------------------------------------------------------ */
/* 章节 */
#my_resume section > h2 {
letter-spacing: 4px;
font-weight: 600;
font-size: 1.1em;
width: fit-content;
margin: 0;
padding: 0 22px 2px 8px;
background-color: var(--my-primary-color);
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
color: #fff;
position: relative;
bottom: -2px;
}
#my_resume section > article {
padding: 2px 10px 0 10px;
border-top: 3px solid var(--my-primary-color);
}
/* ------------------------------------------------------------------------ */
#my_resume h3 {
margin: 0;
font-size: 1em;
font-weight: 600;
}
/* ------------------------------------------------------------------------ */
#my_resume table {
border-collapse: collapse;
border-spacing: none;
}
#my_resume table th {
text-align-last: justify;
vertical-align: top;
white-space: nowrap;
padding-right: 1em;
}
#my_resume table th::after {
content: "：";
position: absolute;
}
/* ------------------------------------------------------------------------ */
#my_resume p {
margin: 0;
padding: 0;
}
/* ------------------------------------------------------------------------ */
#my_resume em {
font-style: normal;
font-weight: 600;
}
/* ------------------------------------------------------------------------ */
#my_resume ul {
margin: 0;
padding: 0;
list-style: none;
}
/* ------------------------------------------------------------------------ */
#my_resume hr {
margin: 0.4em 0;
border: 1px solid var(--my-primary-color);
}
/* ------------------------------------------------------------------------ */
#my_resume a { color: #333993; text-decoration: underline; }
#my_resume a:hover { color: orange; }
/* ------------------------------------------------------------------------ */
/*
## 水平分割线
<div class="my_horizontal_divider"></div>
*/
.my_horizontal_divider {
position: relative;
--line-width: 8px;
--left-color: var(--my-primary-color);
--right-color: var(--my-primary-color);
}
.my_horizontal_divider::before {
content: "";
display: block;
height: var(--line-width);
width: 50%;
background-color: var(--left-color);
clip-path: polygon(0 0, calc(100% - var(--line-width)) 0, 100% 100%, 0 100%);
}
.my_horizontal_divider::after {
content: "";
display: block;
height: var(--line-width);
width: 50%;
background-color: var(--right-color);
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--line-width) 100%);
position: absolute;
top: 0;
right: 0;
}
/* ------------------------------------------------------------------------ */
</style>
</head>
<body>
<article id="my_resume">
<header>
<div class="my_horizontal_divider" style="--left-color: #ada154; margin: 8px 0;"></div>
</header>
<!-- 章节模板 -->
<!--
<section>
<style>
#自定义章节id { /* CSS 样式 */ }
<style>
<h2>自定义标题</h2>
<article id="自定义章节id">
<p>自定义内容</p>
</article>
</section>
-->
<!-- 【简历开始】 -->
<!-- ---------------------------------------------------------------------------------------- -->
<section>
<h2>个人信息</h2>
<article style="display: flex; position: relative; align-items: start;">
<table>
<tr><th>姓名</th><td>xxxxxxxx</td></tr>
<tr><th>出生年月</th><td>xxxx-xx</td></tr>
<tr><th>电话</th><td>xxxxxxxxxxx</td></tr>
<tr><th>邮箱</th><td>xxxxxxxx@xxxx.xxxx</td></tr>
<tr><th>个人博客</th><td>
<a href="" target="_blank">xxxx.xxxx</a>
</td></tr>
</table>
<table style="margin-left: 120px;">
<tr><th>毕业学校</th><td>xxxx</td></tr>
<tr><th>专业</th><td>软件工程</td></tr>
<tr><th>学分绩</th><td>xxxx</td></tr>
<tr><th>排名</th><td>xxxx</td></tr>
<tr><th>英语能力</th><td>xxxx</td></tr>
</table>
<img style="
position: absolute; right: 30px; top: 8px;
width: 120px; height: 170px;
border: 1px solid var(--my-primary-color)"
draggable="false"
src="">
</article>
</section>
<section id="education">
<style>
#education table { width: 100%; }
#education td:nth-child(2n) { width: 1.5em; position: relative; left: -1em; }
#education td:nth-child(2n + 1)::after { content: "："; }
</style>
<h2>教育背景</h2>
<article>
<table>
<tr>
<td>计算机科学导论</td><td>xx</td>
<td>程序设计与问题求解</td><td>xx</td>
<td>高等数学A1</td><td>xx</td>
<td>高等数学A2</td><td>xx</td>
<td>线性代数</td><td>xx</td>
</tr>
<tr>
<td>数据结构与算法</td><td>xx</td>
<td>计算机组成原理B</td><td>xx</td>
<td>操作系统</td><td>xx</td>
<td>算法设计与分析</td><td>xx</td>
<td>离散数学</td><td>xx</td>
</tr>
<tr>
<td>数据库系统原理A</td><td>xx</td>
<td>软件工程与UML</td><td>xx</td>
<td>软件测试</td><td>xx</td>
<td>计算机网络</td><td>xx</td>
<td>编译原理</td><td>xx</td>
</tr>
</table>
</article>
</section>
<section>
<h2>专业技能</h2>
<article>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iusto cum!ad, szdxdxdx
amet numquam quo culpa. Maxime, molestiae ab. Eum aut accusamus nostrum! Nam eius ex porro
dignissimos, placeat corrupti expedita mollitia commodi sequi accusantium Dolor error
</p>
</article>
</section>
<section id="project_experience">
<style>
#project_experience h3 { position: relative; }
#project_experience h3 > time { position: absolute; left: 460px; }
#project_experience h3 > span { position: absolute; right: 0; }
#project_experience table { margin-left: 20px; }
</style>
<h2>项目经历</h2>
<article>
<!-- <h3>项目名称<time>时间段</time><span>个人职责简述</span></h3>
<table>
<tr><th>项目描述</th><td>TODO</td></tr>
<tr><th>承担工作</th><td>TODO</td></tr>
<tr><th>相关技术</th><td>TODO</td></tr>
<tr><th>项目成果</th><td>TODO</td></tr>
</table> -->
<h3>xxxx项目<time>20xx年 x 月 ~ 20xx 年 x 月</time><span>xx职责</span></h3>
<table>
<tr><th>项目描述</th><td>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, accusamus.</td></tr>
<tr><th>承担工作</th><td>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus eos nihil dolores
modi, illo nisi excepturi ipsa, quos iste deserunt ex, tenetur ut amet temporibus
doloremque? Nemo numquam atque eum!</td>
<tr><th>相关技术</th><td>xxxx、xxxx、xxxx、xxxx、xxxx、xxxx</td></tr>
<tr><th>项目成果</th><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque tempore</td></tr>
</table>
<hr>
<h3>xxxx项目<time>20xx年 x 月 ~ 20xx 年 x 月</time><span>xx职责</span></h3>
<table>
<tr><th>项目描述</th><td>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, accusamus.</td></tr>
<tr><th>承担工作</th><td>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus eos nihil dolores
modi, illo nisi excepturi ipsa, quos iste deserunt ex, tenetur ut amet temporibus
doloremque? Nemo numquam atque eum!</td>
<tr><th>相关技术</th><td>xxxx、xxxx、xxxx、xxxx、xxxx、xxxx</td></tr>
<tr><th>项目成果</th><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque tempore</td></tr>
</table>
<hr>
<h3>xxxx项目<time>20xx年 x 月 ~ 20xx 年 x 月</time><span>xx职责</span></h3>
<table>
<tr><th>项目描述</th><td>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, accusamus.</td></tr>
<tr><th>承担工作</th><td>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus eos nihil dolores
modi, illo nisi excepturi ipsa, quos iste deserunt ex, tenetur ut amet temporibus
doloremque? Nemo numquam atque eum!</td>
<tr><th>相关技术</th><td>xxxx、xxxx、xxxx、xxxx、xxxx、xxxx</td></tr>
<tr><th>项目成果</th><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque tempore</td></tr>
</table>
</article>
</section>
<section id="honors_and_awards">
<style>
#honors_and_awards li > time { display: inline-block; min-width: 130px; }
</style>
<h2>荣誉奖励</h2>
<article>
<ul>
<li><time>20xx 年 xx 月</time>第xx届xx大赛xx等奖</li>
<li><time>20xx 年 xx 月</time>第xx届xx大赛xx等奖</li>
<li><time>20xx 年 xx 月</time>第xx届xx大赛xx等奖</li>
<li><time>20xx 年 xx 月</time>第xx届xx大赛xx等奖</li>
</ul>
</article>
</section>
<!-- ---------------------------------------------------------------------------------------- -->
<!-- 【简历结束】 -->
</article>
</body>
</html>
附
Q：我是如何将简历模板渲染到页面上的？
A：使用 <iframe>
<script>
const html_content = `
<p>把要渲染的 HTML 代码写在这里</p>
`;
const iframe = document.querySelector('iframe');
const iframe_doc = iframe.contentDocument || iframe.contentWindow.document;
iframe_doc.open();
iframe_doc.write(html_content);
iframe_doc.close();
</script>