使用 HTML 和 CSS 创建简历

入门

布局和内容

出口

结论

在控制样式和布局的精细细节方面，标准文字处理器远不及 HTML 和 CSS。我之前在文字处理器中修改简历时遇到了困难，所以开始使用 HTML 和 CSS 来创建和维护简历。我发现它总体上效果更好，但在开始转换之前，有一些有用的信息需要了解。

入门

首先声明：本指南并非旨在提供简历模板或样式建议。相反，我将详细介绍使用 HTML/CSS 处理简历打印布局的流程。这包括设置、打印样式以及最终的 PDF 导出。

线框

使用模型或线框图来编写 HTML 和 CSS 要容易得多。我使用 Word 中的旧简历作为基准，但你也可以使用Adob​​e XD或Figma等免费工具轻松地创建模型（Figma 甚至默认支持打印尺寸）。

如果您已经准备好了过去简历的内容（就像我一样），您可以将设计分成几个部分，然后再添加详细信息：

我们不必遵循模板或模型的精确样式，但它对于组织整体布局很有用。

设置“画布”

为了在编写代码时更好地可视化你的简历，我建议创建一个“画布”——一个与你的简历比例相同的 HTML 容器。将此容器放在空白页上，你将获得与典型文字处理器非常相似的视图：

我们实际上可以在 CSS 中使用物理测量单位（即使它们最终还是映射到像素），因此设置这个画布非常容易：

.canvas-container {
  margin: 0 auto; /* for centering, feel free to use flexbox or some other method*/
  box-sizing: border-box;
  padding: 0.5in; /* controls margins */
  width: 8.5in;
  height: 11in;
  background-color: white;
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.7);
}

在基本页面上，它可能呈现的效果如下（使用 0.5 倍或 0.25 倍缩放可获得最佳效果）：

使用画布容器设置整个页面的默认样式，类似于文字处理器中的默认样式。其他值得考虑添加的属性包括line-height和 字体属性，例如font-size和font-family。

布局和内容

参考你的线框图，规划如何将画布空间划分成不同的内容部分。如果你的布局比较复杂，Flexbox和Grid等工具就会派上用场。

我的设置相当简单：简历的每个部分都被分成一个section元素。每当内容跨越两列时，我都会使用网格来分割它们：

.multicolumn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

实际情况如下：

在我的简历中，我只需要两个部分的多列布局：经验和证书/技能。我隐藏了内容，但这些网格在当前布局中的位置如下：

使用类似的东西的另一个好处grid是可维护性；我可以很容易地添加另一个工作经验实例，并让网格自动调整，而不会破坏我的其余布局：

除了grid这两种情况外，其他所有情况都适合使用正常流。您可以随意使用最适合您的方式。

出口

大多数公司和招聘人员不会接受 HTML 页面作为有效的简历。因此，您需要将页面导出为 PDF。浏览器可以通过“打印”命令轻松完成此操作，但我们需要事先对 CSS 进行一些调整。

打印样式

我们将利用打印媒体查询来设置导出页面的样式。它允许我们在浏览器尝试打印时应用特定的样式。

如果您遵循我的建议，将所有内容都构建在容器内，那么这应该是一个简单的过程。为了简单起见，我使整个html元素的宽度和高度与容器的打印尺寸匹配。您可能还需要删除元素与容器之间的所有边距（以及框阴影！）body，否则增加的空间可能会导致渲染额外的页面：

@media print {
  html {
    height: 11in;
    width: 8.5in;
    overflow: hidden;
  }

  body {
    margin: 0;
  }

  .canvas-container {
    width: 100%;
    box-shadow: none;
  }
}

生成 PDF

有了浏览器样式，我们可以使用浏览器的打印对话框将页面保存为 PDF。

虽然我喜欢 Firefox，但 Blink 的打印功能在导出页面的准确性方面表现得更好。我最终使用 Chrome 进行导出——详细说明如下。

打开打印对话框后，将目标设置为“另存为 PDF”。此外，在保存最终结果之前，您还需要调整一些设置。展开“更多设置”选项并检查以下内容：

• 如果您使用灰色以外的颜色，则启用颜色
• 纸张尺寸设置为您喜欢的尺寸（本指南中我始终使用 Letter）
• 边距应设置为无
• 比例应设置为 100
• 已启用背景图形

继续并保存页面。这样，你就可以获得一份易于维护的 HTML 简历和一份可用于实际申请的 PDF 导出文件。

结论

我希望本指南能为您在使用 HTML 和 CSS 创建简历提供一个有用的起点。

如果您对我的最终结果感到好奇，可以在此处找到我当前实现的源代码。

如果您已经完成此过程或有任何其他有关处理 HTML/CSS 中的打印布局的提示，请在下面的评论中告诉我。

这篇文章最初发表在我的个人博客上，为了简洁起见，这里做了一些修改。