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

星期八职场经验网（）【现成经验助你快速完成工作】如何使用HTML5创建在线精美简历案例本节教您使用HTML5和Schema.org微数据创建了一个精美的在线简历，可以在搜索引擎结果里提供你的相关信息。此外，通过使用作者署名标记，你可以帮助搜索引擎识别网络上所有你自己的原创内容!AD：教程细节◆概要：HTML5的微数据API◆难度：初级/中级◆估计完成时间：60-90分钟将创建的最终产品星期八职场经验网（）【现成经验助你快速完成工作】下载源文件示例页面2009年5月，谷歌推出了富摘要信息，在Google的搜索结果显示一个小块，使用户更容易决定哪些网页是他们搜索相关的信息。在2011年6月，谷歌宣布建立Schema.org，从谷歌、Bing和雅虎创建结构化数据的标记模式。本教程演示了如何采用Schema.org的微数据创建一个在线的简历。本教程还包括关于如何使用作者署名标记!(译者注：Schema.org相关信息可参见)附加内容包括星期八职场经验网（）【现成经验助你快速完成工作】本教程示例是一个页面的网站模板，你可以自由的作为你的网上简历使用。作为多余的奖励，多种颜色版本都包含在源文件的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-detailsli.site_url{130.background:url(../images/computer.png)no-repeat;131.background-position:0px2px;132.padding:0px0px12px40px;133.}134.135.#contact-detailsli.twitter{136.background:url(../images/twitter_sm.png)no-repeat;137.background-position:0px0px;138.padding:0px0px12px40px;139.}140.141./*MainContent142.---------------------------------------------------*/星期八职场经验网（）【现成经验助你快速完成工作】143.144.h2.top{145.margin:0px;146.font-size:22px;147.font-weight:bold;148.}149.150.h2{151.margin:40px0px0px0px;152.font-size:22px;153.font-weight:bold;154.}155.156.dl{157.margin:0px50px0px0px;158.}159.160.dt{161.float:left;162.width:200px;163.font-size:20px;164.font-weight:bold;165.font-style:italic;166.text-align:right;167.}168.169.dd{170.width:620px;171.float:right;172.margin-right:20px;173.}174.175.dl#contact{176.margin:0px;177.}178.179.dt#contact{180.margin:0px;181.}星期八职场经验网（）【现成经验助你快速完成工作】182.183.dd#contact{184.margin:0px;185.}186.187.p.bus1{188.margin:0px;189.font-weight:bold;190.color:#669933;191.}192.193.p.edu-info{194.margin:10px0px0px0px;195.font-weight:bold;196.color:#669933;197.}198.199.p.edu-infoa{200.color:#000;201.}202.203.p.edu-infoa:hover{204.color:#669933;205.}206.207.p.time{208.margin:0px;209.}210.211.p.summary{212.margin:10px0px0px0px;213.}214.215.#skillsul.list1{216.float:left;217.list-style:none;218.margin:0px0px0px-40px;219.width:220px;220.}星期八职场经验网（）【现成经验助你快速完成工作】221.222.#skillsul.list2{223.float:left;224.list-style:none;225.margin:0px0px0px0px;226.width:220px;227.}228.229.#skillsli{230.background:url(../images/bullet_green.png)no-repeat;231.background-position:0px2px;232.padding:0px0px0px25px;233.}234.235.abbr{236.border-width:0px;237.}238.239./*Footer240.---------------------------------------------------*/241.242.#footer{243.margin:60px40px0p