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

星期八职场经验网（） 【现成经验助你快速完成工作】 如何使用HTML5创建在线精美简历案例 本节教您使用HTML 5和S微数据创建了一个精美的在线简历，可以在搜索引擎结果里提供你的相关信息。此外，通过使用作者署名标记，你可以帮助搜索引擎识别网络上所有你自己的原创内容! AD： 教程细节 ◆ ?概要：HTML5的微数据API ◆??难度：初级/中级 ◆??估计完成时间： 60-90分钟 将创建的最终产品 HYPERLINK /data/281438 \t _blank 下载源文件 HYPERLINK /demos/html5-resume/html5_resume_demo.html \t _blank 示例页面 2009年5月，谷歌推出了富摘要信息，在Google的搜索结果显示一个小块，使用户更容易决定哪些网页是他们搜索相关的信息。在2011年6月，谷歌宣布建立S，从谷歌、Bing和雅虎创建结构化数据的标记模式。 本教程演示了如何采用S的微数据创建一个在线的简历。本教程还包括关于如何使用作者署名标记!(译者注：S相关信息可参见/2011/06/is_schemaorg_really_a_google_land_grab.html) 附加内容包括 本教程示例是一个页面的网站模板，你可以自由的作为你的网上简历使用。作为多余的奖励，多种颜色版本都包含在源文件的zip包中：深绿色，浅绿色，深蓝色和浅蓝色。 请注意，这并不是网页设计或CSS教程，所以只会提到HTML5和S的微数据标记。 现在，让我们开始吧! 第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; ? } ? ? #c