如何使用HTML5创建在线精美简历
教程细节
◆ 概要：HTML5的微数据API
◆ 难度：初级/中级
◆ 估计完成时间： 60-90分钟
将创建的最终产品
下载源文件 示例页面
2009年5月，谷歌推出了富摘要信息，在Google的搜索结果显示一个小块，使用户更容易决定哪些网页是他们搜索相关的信息。在2011年6月，谷歌宣布建立Schema.org，从谷歌、Bing和雅虎创建结构化数据的标记模式。
本教程演示了如何采用Schema.org的微数据创建一个在线的简历。本教程还包括关于如何使用作者署名标记!(译者注：Schema.org相关信息可参见http://www.rwwchina.com/2011/06/is_schemaorg_really_a_google_land_grab.html)
附加内容包括
本教程示例是一个页面的网站模板，你可以自由的作为你的网上简历使用。作为多余的奖励，多种颜色版本都包含在源文件的zip包中：深绿色，浅绿色，深蓝色和浅蓝色。
请注意，这并不是网页设计或CSS教程，所以只会提到HTML5和Schema.org的微数据标记。
现在，让我们开始吧!
第1步：CSS
创建一个名为“style.css”的CSS样式表，包括下面的代码。不要担心，这相当简单，并且理解它不是本教程的必须。
- /* Default Styles
- --------------------------------------------------- */
- body {
- margin: 0px;
- padding: 0px;
- background: url("../images/bg_dark_green.png");
- background-color: inherit;
- font-size: 16px;
- font-family: "Trebuchet MS", Helvetica, sans-serif;
- color: #000;
- }
- a:link {
- text-decoration: underline;
- color: #000;
- font-weight: bold;
- }
- a:visited {
- text-decoration: underline;
- color: #000;
- font-weight: bold;
- }
- a:hover {
- text-decoration: underline;
- color: #669933;
- font-weight: bold;
- }
- a:active {
- text-decoration: underline;
- color: #000;
- font-weight: bold;
- }
- #wrapper {
- width: 965px;
- margin: 0 auto;
- }
- #content {
- background-color: #eee;
- width: 960px;
- text-align: left;
- overflow: auto;
- position: relative;
- margin: 25px 0px 25px 0px;
- border: #fff solid 2px;
- }
- .clear {
- float: none;
- clear: both;
- margin: 20px 0px 20px 0px;
- }
- /* Header
- --------------------------------------------------- */
- #contact-details .header_1 {
- float: left;
- width: 350px;
- text-align: center;
- margin: 40px 0px 0px 20px;
- }
- #contact-details .header_1 img {
- border: #fff solid 4px;
- background: url("../images/bg_img_dark_green.png");
- padding: 16px;
- margin: 10px 0px 0px 0px;
- }
- #contact-details .header_2 {
- float: left;
- width: 570px;
- margin: 40px 0px 0px 10px;
- }
- #contact-details .header_2 a {
- font-weight: normal;
- }
- #contact-details h1 {
- margin: 0px 0px 0px 20px;
- font-size: 52px;
- font-weight: bold;
- }
- #contact-details h3 {
- margin: 0px 0px 32px 20px;
- font-size: 30px;
- font-weight: bold;
- font-style: italic;
- }
- #contact-details ul.info_1 {
- list-style: none;
- margin: 0px 0px 0px -12px;
- font-size: 18px;
- }
- #contact-details ul.info_2 {
- list-style: none;
- margin: 0px 0px 15px -12px;
- font-size: 18px;
- }
- #contact-details li.address {
- background: url("../images/home.png") no-repeat;
- background-position: 0px 0px;
- padding: 0px 0px 12px 40px;
- }
- #contact-details li.phone {
- background: url("../images/phone.png") no-repeat;
- background-position: 0px 0px;
- padding: 0px 0px 12px 40px;
- }
- #contact-details li.email {
- background: url("../images/mail.png") no-repeat;
- background-position: 0px 0px;
- padding: 0px 0px 12px 40px;
- }
- #contact-details li.site_url {
- background: url("../images/computer.png") no-repeat;
- background-position: 0px 2px;
- padding: 0px 0px 12px 40px;
- }
- #contact-details li.twitter {
- background: url("../images/twitter_sm.png") no-repeat;
- background-position: 0px 0px;
- padding: 0px 0px 12px 40px;
- }
- /* Main Content
- --------------------------------------------------- */
- h2.top {
- margin: 0px;
- font-size: 22px;
- font-weight: bold;
- }
- h2 {
- margin: 40px 0px 0px 0px;
- font-size: 22px;
- font-weight: bold;
- }
- dl {
- margin: 0px 50px 0px 0px;
- }
- dt {
- float: left;
- width: 200px;
- font-size: 20px;
- font-weight: bold;
- font-style: italic;
- text-align: right;
- }
- dd {
- width: 620px;
- float: right;
- margin-right: 20px;
- }
- dl#contact {
- margin: 0px;
- }
- dt#contact {
- margin: 0px;
- }
- dd#contact {
- margin: 0px;
- }
- p.bus1 {
- margin: 0px;
- font-weight: bold;
- color: #669933;
- }
- p.edu-info {
- margin: 10px 0px 0px 0px;
- font-weight: bold;
- color: #669933;
- }
- p.edu-info a {
- color: #000;
- }
- p.edu-info a:hover {
- color: #669933;
- }
- p.time {
- margin: 0px;
- }
- p.summary {
- margin: 10px 0px 0px 0px;
- }
- #skills ul.list1 {
- float: left;
- list-style: none;
- margin: 0px 0px 0px -40px;
- width: 220px;
- }
- #skills ul.list2 {
- float: left;
- list-style: none;
- margin: 0px 0px 0px 0px;
- width: 220px;
- }
- #skills li {
- background: url("../images/bullet_green.png") no-repeat;
- background-position: 0px 2px;
- padding: 0px 0px 0px 25px;
- }
- abbr {
- border-width: 0px;
- }
- /* Footer
- --------------------------------------------------- */
- #footer {
- margin: 60px 40px 0px 40px;
- }
- #footer img {
- border: 0px;
- }
- #footer .footer_content {
- width: 700px;
- overflow: auto;
- margin: auto;
- border: #fff solid 2px;
- background-color: #dcdcdc;
- }
- #footer ul.icons_1 {
- float: left;
- width: 525px;
- margin: 15px 10px 10px 15px;
- padding: 0px;
- }
- #footer ul.icons_2 {
- float: right;
- width: 100px;
- margin: 10px 20px 10px 10px;
- padding: 0px;
- }
- #footer .icons_1 li, #footer .icons_2 li {
- margin: 0px 0px 0px 7px;
- padding: 0px;
- list-style-type: none;
- display: inline;
- }
- #footer a {
- color: #000;
- }
- #footer a:hover {
- color: #669933;
- }
- #footer .credits {
- float: none;
- clear: both;
- margin: 10px 0px 20px 0px;
- font-size: 12px;
- text-align: center;
- }
- #footer .credits a {
- font-weight: normal;
- }
#p#
第2步：页面
下一步，我们需要一个HTML文件。下面是一个我们都可能熟悉的基本布局。
Online Resume of Your Name