新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

如何使用HTML5創(chuàng)建在線精美簡歷

教程細節(jié)

◆ 概要：HTML5的微數(shù)據(jù)API

◆ 難度：初級/中級

◆ 估計完成時間： 60-90分鐘

將創(chuàng)建的最終產(chǎn)品

下載源文件示例頁面

2009年5月，谷歌推出了富摘要信息，在Google的搜索結(jié)果顯示一個小塊，使用戶更容易決定哪些網(wǎng)頁是他們搜索相關(guān)的信息。在2011年6月，谷歌宣布建立Schema.org，從谷歌、Bing和雅虎創(chuàng)建結(jié)構(gòu)化數(shù)據(jù)的標記模式。

本教程演示了如何采用Schema.org的微數(shù)據(jù)創(chuàng)建一個在線的簡歷。本教程還包括關(guān)于如何使用作者署名標記!(譯者注：Schema.org相關(guān)信息可參見http://www.rwwchina.com/2011/06/is_schemaorg_really_a_google_land_grab.html)

附加內(nèi)容包括

本教程示例是一個頁面的網(wǎng)站模板，你可以自由的作為你的網(wǎng)上簡歷使用。作為多余的獎勵，多種顏色版本都包含在源文件的zip包中：深綠色，淺綠色，深藍色和淺藍色。

請注意，這并不是網(wǎng)頁設(shè)計或CSS教程，所以只會提到HTML5和Schema.org的微數(shù)據(jù)標記。

現(xiàn)在，讓我們開始吧!

第1步：CSS

創(chuàng)建一個名為“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

Your Name

Web Developer / Designer

555 Street Address, Toledo, Ohio, 43606 U.S.A.

(000) 000-0000

your-email@gmail.com

www.your-website.com

@twitter-screen-name

Profile:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Skills:

XHTML

HTML5

PHP

JavaScript

Magento

WordPress

HTML

CSS

MySQL

jQuery

CMS Made Simple

Photoshop

Experience:

Web Developer / Designer

Company Name 1

February 2009 - Present

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Web Developer / Programmer

Company Name 2

November 2007 - February 2009

Web Developer / Programmer

Company Name 3

March 2006 - November 2007

Publications:

Nettuts+, 8/25/11

Education:

University of Toledo

2801 Bancroft Street

Toledo, Ohio, 43606 U.S.A.

Web Design

2003 - 2005

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

新聞中心

Your Name

Web Developer / Designer

Web Developer / Programmer

Web Developer / Programmer

其他資訊