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

最新推荐文章于 2022-05-14 00:01:05 发布

cune1359

最新推荐文章于 2022-05-14 00:01:05 发布

阅读量494

点赞数

文章标签： html python css java 人工智能

本文是我们的“ 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的分辨率删除了文档外部的一些空白区域。您仍然可以看到带纹理的背景，但是在如此纤细的垂直视口中并不是很重要。