css制作邮件（利用CSS制作一份简历）
许多流行的简历设计通过以网格形状布局部分来充分利用可用的页面空间。让我们使用 CSS Grid 创建一个在打印和不同屏幕尺寸下看起来很棒的布局。这样，我们可以在线和离线使用简历，这在新的一年里可能会派上用场！
首先，我们将创建一个简历容器和我们的简历部分。
<article class="resume">
<section class="name"></section>
<section class="photo"></section>
<section class="about"></section>
<section class="work"></section>
<section class="education"></section>
<section class="community"></section>
<section class="skills"></section>
</article>
要开始使用 Grid，我们添加 display: grid 到外部 resume 元素。接下来，我们描述应该如何将事物放置在网格上。在这种情况下，我们将指定两列和四行。
我们使用 CSS Grid 的fr单位来指定在可用空间上给出多少分数。我们将给行相等的空间（1fr每个），并使第一列比第二列宽两倍（2fr）。
.resume {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
grid-template-area接下来我们将描述如何使用属性将这些元素放置在网格上。首先，我们需要 grid-area为每个部分定义一个命名。您可以使用任何名称，但在这里我们将使用与我们的部分相同的名称：
.name {
grid-area : name;
}
.photo {
grid-area : photo;
}
/* define a grid-area for every section */
现在是有趣的部分，它使更改设计变得轻而易举。将网格区域放置在grid-template-areas您希望它们布置的属性中。例如，在这里我们将name在左上角添加部分，grid-template-area 以将我们的名字放在简历的左上角。我们的work部分有很多内容，所以我们添加了两次，这意味着它将延伸到两个网格单元格上。
.resume {
grid-template-areas:
"name photo"
"work about"
"work education"
"community skills";
}
以下是我们目前所拥有的：
CSS Grid 规范提供了许多有用的属性，用于在网格上调整大小和布局，以及一些速记属性。在这个例子中，我们通过展示一种可能的方法来保持简单。请务必查看一些很棒的资源，以了解如何最好地将 CSS Grid 合并到您的项目中。
调整布局grid-template-areas使更改布局变得非常容易。例如，如果您认为雇主对您的skills 部门比对您的部门更感兴趣，您education可以切换名称grid-template-areas，他们将在您的布局中交换位置，而无需进行其他更改。
.resume {
grid-template-areas:
"name photo"
"work about"
"work skills" /* skills now moved above education */
"community education";
}
我们可以实现一个流行的简历设计，其中细列位于左侧，CSS 更改最少。这是关于网格的好处之一：我们可以重新排列命名的网格区域以移动事物，同时将源顺序完全保留在原处！
.resume {
grid-template-columns: 1fr 2fr;
grid-template-areas:
"photo education"
"name work"
"about work"
"skills community";
}
也许您想在组合中添加个人参考。我们可以在网格模板中添加第三列并将它们滑入底行。请注意，我们还需要将列单位更改为相等的分数，然后更新模板区域，以便某些元素跨越两列，以保持我们的布局到位。
.resume {
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"name name photo"
"work work about"
"work work education"
"community references skills";
}
部分之间的间隙可以通过grid-gap属性来控制。
使其响应对于小屏幕，例如移动设备，我们可以在单个全宽列中显示简历部分。
grid-template-columns: 1fr;
grid-template-areas:
"photo"
"name"
"about"
"work"
"education"
"skills"
"community"
"references"
}
然后我们可以使用媒体查询来更改更宽屏幕的布局。
@media (min-width: 1200px) {
.resume {
grid-template-areas:
"name photo"
"work about"
"work education"
"community skills";
}
}
可以在其间添加额外的断点。例如，在平板电脑等中等屏幕上，我们可能希望所有内容都在一个列中，但personal和image部分并排位于顶部。
@media (min-width: 900px) {
.resume {
grid-template-columns: 2fr 1fr;
grid-template-areas:
"name photo"
"about about"
"work work"
"education education"
"skills skills"
"community community"
"references references"
}
}
如果你想让你的简历很好地打印在一张纸上，有几件事要记住。最困难的挑战通常是减少字数以使其适合一页。
避免减小字体大小以压缩更多信息，因为它可能会变得难以阅读。一个技巧是在你开发的时候给你的简历元素添加一个临时的大小限制。
.resume {
/* for development only */
width : 210mm;
height: 297mm;
border: 1px solid black;
}
通过制作此 A4 纸大小的边框，可以更清楚地查看尺寸是否太小，或者内容是否溢出边框，表明它将打印到第二页上。
您可以提供打印 CSS 来隐藏浏览器可能插入的内容，例如日期和页码。
@media print {
/* remove any screen only styles, for example link underline */
}
@page {
padding: 0;
margin: 0cm;
size: A4 portrait;
}
需要注意的一件事是，不同的浏览器可能会使用不同的字体呈现您的简历，这些字体的大小可能会略有不同。如果您想要一份非常精确的打印简历，另一种选择是将其保存为 PDF 并在您的网站上提供下载链接。
浏览器支持CSS Grid 在现代浏览器中有很好的支持。
Internet Explorer (IE) 支持使用前缀的旧版 CSS 网格规范。例如grid-template-columns写为-ms-grid-columns。通过Autoprefixer运行代码可以帮助添加这些前缀，但需要手动更改和彻底测试，因为在旧规范中，某些属性的行为不同，而有些则不存在。
autoprefixer 的另一种方法是提供 fallback，例如使用浮动布局。无法识别 CSS Grid 属性的浏览器将使用此后备显示。不管您是否需要支持 IE，后备是明智的，以确保（可能未知）不支持 CSS Grid 的浏览器仍然显示您的内容。
即使您还没有准备好托管在线简历，使用 CSS Grid、探索不同的布局、生成精美的 PDF 并同时学习 CSS 的精彩部分仍然很有趣。
祝求职愉快！
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
