您所在的位置:开发 > Web > 热点推荐 > 如何使用HTML 5创建在线精美简历(1)

如何使用HTML 5创建在线精美简历(1)

2011-11-14 09:30 蒋宇捷 蒋宇捷的专栏 我要评论(0) 字号:T | T
一键收藏,随时查看,分享好友!

本节教您使用HTML 5和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. /* Default Styles  
  2. --------------------------------------------------- */  
  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: "Trebuchet MS", 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: 0 auto;  
  41. }  
  42.  
  43. #content {  
  44.     background-color: #eee;  
  45.     width: 960px;  
  46.     text-align: left;  
  47.     overflow: auto;  
  48.     position: relative;  
  49.     margin: 25px 0px 25px 0px;  
  50.     border: #fff solid 2px;  
  51. }  
  52.  
  53. .clear  {  
  54.     float: none;  
  55.     clear: both;  
  56.     margin: 20px 0px 20px 0px;  
  57. }  
  58.  
  59. /* Header  
  60. --------------------------------------------------- */  
  61.  
  62. #contact-details .header_1 {  
  63.     float: left;  
  64.     width: 350px;  
  65.     text-align: center;  
  66.     margin: 40px 0px 0px 20px;  
  67. }  
  68.  
  69. #contact-details .header_1 img {  
  70.     border: #fff solid 4px;  
  71.     background: url("../images/bg_img_dark_green.png");  
  72.     padding: 16px;  
  73.     margin: 10px 0px 0px 0px;  
  74. }  
  75.  
  76. #contact-details .header_2 {  
  77.     float: left;  
  78.     width: 570px;  
  79.     margin: 40px 0px 0px 10px;  
  80. }  
  81.  
  82. #contact-details .header_2 a {  
  83.     font-weight: normal;  
  84. }  
  85.  
  86. #contact-details  h1    {  
  87.     margin: 0px 0px 0px 20px;  
  88.     font-size: 52px;  
  89.     font-weight: bold;  
  90. }  
  91.  
  92. #contact-details  h3    {  
  93.     margin: 0px 0px 32px 20px;  
  94.     font-size: 30px;  
  95.     font-weight: bold;  
  96.     font-style: italic;  
  97. }  
  98.  
  99. #contact-details ul.info_1  {  
  100.     list-style: none;  
  101.     margin: 0px 0px 0px -12px;  
  102.     font-size: 18px;  
  103. }  
  104.  
  105. #contact-details ul.info_2  {  
  106.     list-style: none;  
  107.     margin: 0px 0px 15px -12px;  
  108.     font-size: 18px;  
  109. }  
  110.  
  111. #contact-details li.address {  
  112.     background: url("../images/home.png") no-repeat;  
  113.     background-position: 0px 0px;  
  114.     padding: 0px 0px 12px 40px;  
  115. }  
  116.  
  117. #contact-details li.phone   {  
  118.     background: url("../images/phone.png") no-repeat;  
  119.     background-position: 0px 0px;  
  120.     padding: 0px 0px 12px 40px;  
  121. }  
  122.  
  123. #contact-details li.email   {  
  124.     background: url("../images/mail.png") no-repeat;  
  125.     background-position: 0px 0px;  
  126.     padding: 0px 0px 12px 40px;  
  127. }  
  128.  
  129. #contact-details li.site_url    {  
  130.     background: url("../images/computer.png") no-repeat;  
  131.     background-position: 0px 2px;  
  132.     padding: 0px 0px 12px 40px;  
  133. }  
  134.  
  135. #contact-details li.twitter {  
  136.     background: url("../images/twitter_sm.png") no-repeat;  
  137.     background-position: 0px 0px;  
  138.     padding: 0px 0px 12px 40px;  
  139. }  
  140.  
  141. /* Main Content  
  142. --------------------------------------------------- */  
  143.  
  144. h2.top  {  
  145.     margin: 0px;  
  146.     font-size: 22px;  
  147.     font-weight: bold;  
  148. }  
  149.  
  150. h2  {  
  151.     margin: 40px 0px 0px 0px;  
  152.     font-size: 22px;  
  153.     font-weight: bold;  
  154. }  
  155.  
  156. dl  {  
  157.     margin: 0px 50px 0px 0px;  
  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: 10px 0px 0px 0px;  
  195.     font-weight: bold;  
  196.     color: #669933;  
  197. }  
  198.  
  199. p.edu-info a    {  
  200.     color: #000;  
  201. }  
  202.  
  203. p.edu-info a:hover  {  
  204.     color: #669933;  
  205. }  
  206.  
  207. p.time  {  
  208.     margin: 0px;  
  209. }  
  210.  
  211. p.summary   {  
  212.     margin: 10px 0px 0px 0px;  
  213. }  
  214.  
  215. #skills ul.list1    {  
  216.     float: left;  
  217.     list-style: none;  
  218.     margin: 0px 0px 0px -40px;  
  219.     width: 220px;  
  220. }  
  221.  
  222. #skills ul.list2    {  
  223.     float: left;  
  224.     list-style: none;  
  225.     margin: 0px 0px 0px 0px;  
  226.     width: 220px;  
  227. }  
  228.  
  229. #skills li {  
  230.     background: url("../images/bullet_green.png") no-repeat;  
  231.     background-position: 0px 2px;  
  232.     padding: 0px 0px 0px 25px;  
  233. }  
  234.  
  235. abbr    {  
  236.     border-width: 0px;  
  237. }  
  238.  
  239. /* Footer  
  240. --------------------------------------------------- */  
  241.  
  242. #footer {  
  243.     margin: 60px 40px 0px 40px;  
  244. }  
  245.  
  246. #footer img {  
  247.     border: 0px;  
  248. }  
  249.  
  250. #footer .footer_content {  
  251.     width: 700px;  
  252.     overflow: auto;  
  253.     margin: auto;  
  254.     border: #fff solid 2px;  
  255.     background-color: #dcdcdc;  
  256. }  
  257.  
  258. #footer ul.icons_1  {  
  259.     float: left;  
  260.     width: 525px;  
  261.     margin: 15px 10px 10px 15px;  
  262.     padding: 0px;  
  263. }  
  264.  
  265. #footer ul.icons_2  {  
  266.     float: right;  
  267.     width: 100px;  
  268.     margin: 10px 20px 10px 10px;  
  269.     padding: 0px;  
  270. }  
  271.  
  272. #footer .icons_1 li, #footer .icons_2 li {  
  273.     margin: 0px 0px 0px 7px;  
  274.     padding: 0px;  
  275.     list-style-type: none;  
  276.     display: inline;  
  277. }  
  278.  
  279. #footer a   {  
  280.     color: #000;  
  281. }  
  282.  
  283. #footer a:hover {  
  284.     color: #669933;  
  285. }  
  286.  
  287. #footer .credits {  
  288.     float: none;  
  289.     clear: both;  
  290.     margin: 10px 0px 20px 0px;  
  291.     font-size: 12px;  
  292.     text-align: center;  
  293. }  
  294.  
  295. #footer .credits a  {  
  296.     font-weight: normal;  

内容导航
 第 1 页:CSS  第 2 页:页面
 第 3 页:关于页面的几个说明  第 4 页:添加Schema.org微数据-ITEMLIST列表
 第 5 页:关于作者署名标记

分享到:

网友评论TOP5

查看所有评论(

提交评论

热点职位

更多>>

热点专题

更多>>
  • QWrap入门指南
    QWrap入门指南
    你只需要一点javascript语言的基本知识,就可以来轻松
  • JavaScript入门
    JavaScript入门
    1996年,网景(Netscape)公司开始研发一种新的语言Moch
  • 移动Web开发指南
    移动Web开发指南
    移动设备是一种全新的媒介。桌面系统中总结出来的最佳

读书

软件工程:实践者的研究方法
20多年以来,《软件工程:实践者的研究方法》一书是最受学生和行业专业人员欢迎的软件工程指南。它在全面而系统、概括而清晰地介

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i