软件工程师-如何使用HTML5创建在线精美简历案例VIP免费

如何使用HTML5创建在线精美简历案例本节教您使用HTML5和Schema.org微数据创建了一个精美的在线简历，可以在搜索引擎结果里提供你的相关信息。此外，通过使用作者署名标记，你可以帮助搜索引擎识别网络上所有你自己的原创内容!AD：教程细节◆概要：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样式表，包括下面的代码。不要担心，这相当简单，并且理解它不是本教程的必须。1./*DefaultStyles2.---------------------------------------------------*/3.4.body{5.margin:0px;6.padding:0px;7.background:url("../images/bg_dark_green.png");8.background-color:inherit;9.font-size:16px;10.font-family:"TrebuchetMS",Helvetica,sans-serif;11.color:#000;12.}13.14.a:link{15.text-decoration:underline;16.color:#000;17.font-weight:bold;18.}19.20.a:visited{21.text-decoration:underline;22.color:#000;23.font-weight:bold;24.}25.26.a:hover{27.text-decoration:underline;28.color:#669933;29.font-weight:bold;30.}31.32.a:active{33.text-decoration:underline;34.color:#000;35.font-weight:bold;36.}37.38.#wrapper{39.width:965px;40.margin:0auto;41.}42.43.#content{44.background-color:#eee;45.width:960px;46.text-align:left;47.overflow:auto;48.position:relative;49.margin:25px0px25px0px;50.border:#fffsolid2px;51.}52.53..clear{54.float:none;55.clear:both;56.margin:20px0px20px0px;57.}58.59./*Header60.---------------------------------------------------*/61.62.#contact-details.header_1{63.float:left;64.width:350px;65.text-align:center;66.margin:40px0px0px20px;67.}68.69.#contact-details.header_1img{70.border:#fffsolid4px;71.background:url("../images/bg_img_dark_green.png");72.padding:16px;73.margin:10px0px0px0px;74.}75.76.#contact-details.header_2{77.float:left;78.width:570px;79.margin:40px0px0px10px;80.}81.82.#contact-details.header_2a{83.font-weight:normal;84.}85.86.#contact-detailsh1{87.margin:0px0px0px20px;88.font-size:52px;89.font-weight:bold;90.}91.92.#contact-detailsh3{93.margin:0px0px32px20px;94.font-size:30px;95.font-weight:bold;96.font-style:italic;97.}98.99.#contact-detailsul.info_1{100.list-style:none;101.margin:0px0px0px-12px;102.font-size:18px;103.}104.105.#contact-detailsul.info_2{106.list-style:none;107.margin:0px0px15px-12px;108.font-size:18px;109.}110.111.#contact-detailsli.address{112.background:url("../images/home.png")no-repeat;113.background-position:0px0px;114.padding:0px0px12px40px;115.}116.117.#contact-detailsli.phone{118.background:url("../images/phone.png")no-repeat;119.background-position:0px0px;120.padding:0px0px12px40px;121.}122.123.#contact-detailsli.email{124.background:url("../images/mail.png")no-repeat;125.background-position:0px0px;126.padding:0px0px12px40px;127.}128.129.#contact-deta...