html5 css 响应式_在HTML5 / CSS3中编写响应式简历

本文是我们的“ Web响应式设计系列”的一部分，该系列由工具，资源和教程组成，可帮助您为所有平台的用户创建网站。单击此处查看同一系列的更多文章。

业务部分的几乎每个人都在某个时间创建了简历。当做自由职业者时，您总是在争夺新项目。由于这一短暂的工作周期，因此有助于向潜在客户简要介绍您的过去经验。还有比在线提供专业简历更好的机会吗？

演示版
下载源代码

在本教程中，我想演示如何构建响应式单页简历布局 。我将对HTML5 / CSS3中的所有内容进行编码，以在各种屏幕分辨率下正常工作。简历还将支持由schema.org支持的微数据，以提供更多SEO技术优势。

建立文件

我以HTML5文档类型和标准meta元素开始网页。但是要使此布局响应，我们需要设置一些其他组件。其中大多数是典型的元标记，所有现代浏览器都将支持它们。

<!doctype html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Online Responsive Resume Demo</title><meta name="author" content="Jake Rocheleau"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="HandheldFriendly" content="true"><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Simonetta:400,900|Balthazar"><link rel="stylesheet" type="text/css" href="styles.css"><link rel="stylesheet" type="text/css" href="responsive.css"><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
</head>

meta viewport标签对于使响应技术在智能手机上运行至关重要。我们将比例重置为1：1，以便布局显示为像素完美。您还会注意到，我包括了Google Web Fonts的外部样式表。我正在使用两种自定义字体“ Simonetta”和“ Balthazar”。独特的字体肯定会吸引您的访客的注意，并与单页设计相协调。

我还设置了一个小的IE条件，其中包括一些用于旧版浏览器的开源脚本。 Internet Explorer 8和更早的版本在呈现HTML5元素和CSS3媒体查询时遇到问题。但是值得庆幸的是，一些聪明的开发人员已经弄清楚了如何通过JavaScript使它们工作。

主要内容块

整个文档都包装在一个div中，其中包含许多不同的块节。顶部的<header>标签包括我的照片，姓名，电子邮件地址和其他重要的元数据。之后，我将每个块分为其余内容的<section>元素。

当您调整页面大小时，这些块元素会优雅地位于彼此之间。我在外部样式表中设置了一些媒体查询的不同实例。这样可以在以后再进行编辑时更轻松地跟踪样式。

<header class="clearfix"><div id="info">         <h1><span itemprop="name">Jake Rocheleau</span></h1><h3><span itemprop="jobTitle">Freelance Writer & Web Developer</span></h3><small itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="addressLocality">Hudson</span>, <span itemprop="addressRegion">Massachusetts</span>, <span itemprop="addressCountry">USA</span></small><small><span itemprop="email">jakerocheleau@gmail.com</span></small><small><a href="http://byjakewithlove.com/" itemprop="url">My Portfolio</a> • <a href="http://twitter.com/jakerocheleau" itemprop="url">@jakerocheleau</a></small></div><div id="photo"><img src="https://assets.hongkiat.com/uploads/responsive-resume/jake-rocheleau-250.jpg" alt="Jake Rocheleau resume photo avatar" itemprop="image" /></div>
</header>

在进入详细CSS之前，我想先解释一下微数据的使用。如果仔细观察，我会发现许多不同元素中的属性分别是itemtype ， itemscope和itemprop 。这些都与Schmea项目有关，该项目希望为Web提供数据结构。

格式化有用的微数据

包括Google，Yahoo！和Bing在内的所有主要搜索引擎都已将Schema作为数据标记的最佳语法。通过标记有关您自己的详细信息，它可以帮助这些搜索引擎在线显示您内容的相关结果。让我们分解一下如何设置它们。

<div id="w" itemscope itemtype="http://schema.org/Person">

itemscope属性适用于任何包含架构项目信息的容器。始终跟在itemtype属性之后，在这种情况下，该属性描述一个person 。在这个包装div中，我可以使用itemprop以及其文档页面上列出的任何详细信息来标记任何内容。

推荐的方法是将内容包装在span标记内，而不是直接附加到元素上。给照片贴上标签时，应将itemprop直接附加到img元素上。但是否则，通过将数据包装在span标签中，您将获得更整洁的标记。

多少是太多了？

我认为您可以进入的细节数量没有限制。可以使用微数据来帮助计算机识别在线上下文中的人员，组织，产品和其他项目。您可以提供的信息越多越好。

值得保持开放态度，看看如何在自己的网站中使用这些微数据。如果您花10到15分钟浏览Schema文档，这比您想象的要容易得多。我们可以从简历演示中看到两个可靠的示例：

<section id="skills" class="clearfix" itemscope itemtype="http://schema.org/ItemList"><h2 itemprop="name">Skillset</h2><section id="skills-left"><h4 itemprop="about">Development</h4><ul><li itemprop="itemListElement">HTML5/CSS3</li><li itemprop="itemListElement">JavaScript & jQuery</li><li itemprop="itemListElement">PHP Backend</li><li itemprop="itemListElement">SQL Databases</li><li itemprop="itemListElement">Wordpress</li><li itemprop="itemListElement">Pligg CMS</li><li itemprop="itemListElement">Some Objective-C</li></ul></section><section id="skills-right"><h4 itemprop="about">Software</h4><ul><li itemprop="itemListElement">Adobe Photoshop</li><li itemprop="itemListElement">Adobe Dreamweaver</li><li itemprop="itemListElement">MS Office 2007-2010</li><li itemprop="itemListElement">cPanel & phpMyAdmin</li><li itemprop="itemListElement">Xcode 4</li></ul></section>
</section>

在列出我的各种技能时，我已经建立了一个定义ItemList模式的新容器。在人员下没有任何类型的技能或经验要列出，因此这是一种安全的选择。这里的价值在于Google可以理解每个itemListElement彼此相关。在这种情况下，我们列出了我知道如何使用的语言和软件。

<section id="articles"><h2>Recent Articles</h2><p itemscope itemtype="http://schema.org/Article"><span itemprop="name"><a href="https://www.hongkiat.com/blog/css-javascript-fallback-methods/" itemprop="url" title="10 Useful Fallback Methods For CSS And Javascript">10 Useful Fallback Methods For CSS And Javascript</a></span> • Published in <span itemprop="datePublished">July 2012</span></p><p itemscope itemtype="http://schema.org/Article"><span itemprop="name"><a href="https://www.hongkiat.com/blog/wordpress-url-rewrite/" itemprop="url" title="Rewriting URLs In WordPress: Tips And Plugins">Rewriting URLs In WordPress: Tips And Plugins</a></span> • Published in <span itemprop="datePublished">July 2012</span></p><p itemscope itemtype="http://schema.org/Article"><span itemprop="name"><a href="https://www.hongkiat.com/blog/jpeg-optimization-guide/" itemprop="url" title="JPEG Optimization For The Web - Ultimate Guide">JPEG Optimization For The Web - Ultimate Guide</a></span> • Published in <span itemprop="datePublished">July 2012</span></p><p itemscope itemtype="http://schema.org/Article"><span itemprop="name"><a href="https://www.hongkiat.com/blog/design-perfect-newsletter/" itemprop="url" title="9 Tricks To Design The Perfect HTML Newsletter">9 Tricks To Design The Perfect HTML Newsletter</a></span> • Published in <span itemprop="datePublished">May 2012</span></p><p itemscope itemtype="http://schema.org/Article"><span itemprop="name"><a href="https://www.hongkiat.com/blog/google-website-optimizer-ab-testing-guide/" itemprop="url" title="Guide To A/B Testing With Google Website Optimizer">Guide To A/B Testing With Google Website Optimizer</a></span> • Published in <span itemprop="datePublished">March 2012</span></p>
</section>

另一个很好的例子是位于最底部的文章列表。有一个用于文章和博客文章的架构设置，所有这些都与在线找到的内容有关。我已经指出了文章的URL和发布日期，这些信息对于这些搜索引擎搜寻器来说已经足够了。

只要记住，微数据就是要格式化要由计算机组织的内容。这张单页的简历是定义特定人的特质的完美示例。这些并不会在每个网站上都有用，但这是一种令人兴奋的理解方法。

相对CSS样式

在最后一部分中，让我们看一下如何设置整个网页的样式。在样式表的顶部，我正在定义一些初始重置和基本元素属性。这些包括标题，列表项和锚链接悬停效果。

* { margin: 0; padding: 0; }
html { height: 101%; }
body { background: #f2f2f2 url('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); font-size: 62.5%; padding-bottom: 65px; }h1 { font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: #454545; font-size: 3.6em; margin-bottom: 6px; }
h2 { font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: #484848; font-size: 2.5em; margin-bottom: 10px; text-decoration: underline; }
h3 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: #777; font-weight: normal; font-size: 1.8em; margin-bottom: 10px; }
h4 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: #656565; font-weight: bold; font-size: 1.75em; margin-bottom: 4px; }p { font-family: "Balthazar", "Droid Serif", Times New Roman, serif; color: #565656; font-size: 1.8em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px; }
small { font-family: "Balthazar", serif; color: #656565; font-size: 1.6em; display: block; margin-bottom: 6px; }
ul { display: block; list-style: none; }
ul li { padding-left: 45px; list-style-type: none; vertical-align: top; background: url('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bottom: 5px; font-family: "Balthazar", serif; color: #666; font-size: 1.6em; line-height: 2.3em; }img { border: 0; max-width: 100%; }a { color: #5582d6; text-decoration: none; }
a:hover { text-decoration: underline; }

除了一些自定义字体堆栈外，没有什么太有趣了。我还抓取了一个独特的项目符号图标，而不是使用默认的“光盘”。尝试查找类似设计时，可以尝试搜索诸如Icon Finder之类的目录。

/** @group core layout **/
#w { margin: 0px 50px; padding: 20px 40px; padding-top: 35px; background: #fff; min-width: 260px; max-width: 900px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; }header { width: 100%; }/** @group personal settings **/
#info { float: left; margin-bottom: 12px; }
#photo { float: right; }
#photo img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
}

页面上只有几个重要的区域需要引起注意。当然，包装div设置有额外的边距和填充。而且最大宽度限制为900px，因为任何较大的尺寸都感觉页面有太多空白。我还在页面底部使用了圆角，以使眼睛更平滑。

响应式设计

此在线简历最关键的方面可能是响应功能。在调整浏览器窗口大小时，我有五个不同的断点设置来实现各种效果。

@media only screen and (max-width: 740px) {h1 { font-size: 4.5em; }h3 { font-size: 2.2em; }h2 { display: block; text-align: center; }#info { float: none; display: block; text-align: center; }#photo {float: none;display: block;text-align: center;}#w { padding: 20px 15px; }p { padding: 0; }
}

初始740px位于照片图像与标题文本发生冲突的位置。而不是让照片下拉到右侧，我们清除了两个元素并使整个布局居中。我还增加了标题文本的大小，以留下更坚实的影响。

随着窗口变小，我从包装div和段落中删除了一些额外的填充。标头之后，我们遇到的下一个问题是UL技能列表。我分解了两列方法，而是使列表项彼此相邻浮动。

@media only screen and (max-width: 570px) {ul li {display: inline-block; padding-left: 15px; width: 140px; background-position: -5px 0px;margin-right: 6px; line-height: 1.7em;}#skills-left, skills-right { margin-bottom: 15px; }
}

这还需要重新定位许多默认文本属性。我们必须更新行高并重新定位每个列表项的项目符号图标。我设置了一个固定的宽度，以使网格看起来更有条理，直到下一个断点为止。

智能手机编码

最后三个媒体查询很小但非常重要。在横向和纵向模式之间切换时，iPhone会调整任何移动浏览器的大小。大多数Android设备和Windows Mobile手机也是如此。

@media only screen and (max-width: 480px) {ul li { width: 120px; }#w { margin: 0 20px; }
}@media only screen and (max-width: 320px) {#w { margin: 0 10px; }
}/** iPhone only **/
@media screen and (max-device-width: 480px) {ul li { width: 150px; }
}

当第一次达到480px或更小时，我们从包装器中移除了更多填充，并再次调整了列表项的大小。然后以320px的分辨率删除了文档外部的一些空白区域。您仍然可以看到带纹理的背景，但是在如此纤细的垂直视口中并不是很重要。

最后，我正在使用max-device-width来定位iPhone设备本身，即最大宽度为480px的任何其他移动屏幕。在这种情况下，我想将列表项更新得更宽一些，以便它们可以填充整个屏幕。由于人像太瘦而无法注意到任何差异，因此只会影响横向视图中的技能列表。

演示版
下载源代码

最后的想法

通过Internet工作通常至少需要某种类型的在线投资组合。当您可以链接到单个页面并将所有详细信息整理在一起的简历时，表明您的意思是生意。认真的雇主和潜在客户会为网站设计的这种富有魅力的专业素养而屈服。

我希望您可以从本教程中摘取一些要点。在世界任何地方的自由职业者都可以通过一些技术努力来推销自己。请随意下载我上面的演示源代码，并在我们的评论区域中分享您对本文的看法。

翻译自: https://www.hongkiat.com/blog/responsive-resume/