Home思洋影视事业部网站建设知识库
0 Comments

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

发布于：2013-09-02  |   作者：广州网站建设  |   已聚集：人围观

第2步：页面

下一步，我们需要一个HTML文件。下面是一个我们都可能熟悉的基本布局。
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		<!DOCTYPE html> 
    2. 
	
  2. 
		<html> 
    3. 
	
  3. 
		<head> 
    4. 
	
  4. 
		<meta charset=UTF-8"> 
    5. 
	
  5. 
		<meta charset="utf-8"> 
    6. 
	
  6. 
		   
    7. 
	
  7. 
		<title>Online Resume of Your Name</title> 
    8. 
	
  8. 
		   
    9. 
	
  9. 
		<!-- Meta --> 
    10. 
	
  10. 
		<meta name="description" content="A few lines about yourself"> 
    11. 
	
  11. 
		<meta name="keywords" content="web,developer,designer,resume" /> 
    12. 
	
  12. 
		<meta name="author" content="Your Name"> 
    13. 
	
  13. 
		   
    14. 
	
  14. 
		<!-- CSS Stylesheet --> 
    15. 
	
  15. 
		<link rel="stylesheet" type="text/css" href="css/style.css" /> 
    16. 
	
  16. 
		   
    17. 
	
  17. 
		<!--[if lt IE 9]> 
    18. 
	
  18. 
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    19. 
	
  19. 
		<![endif]--> 
    20. 
	
  20. 
		   
    21. 
	
  21. 
		</head> 
    22. 
	
  22. 
		<body> 
    23. 
	
  23. 
		   
    24. 
	
  24. 
		<!-- Begin Wrapper --> 
    25. 
	
  25. 
		<div id="wrapper"> 
    26. 
	
  26. 
		   
    27. 
	
  27. 
		<!-- Begin Content Area --> 
    28. 
	
  28. 
		<div id="content"> 
    29. 
	
  29. 
		   
    30. 
	
  30. 
		<!-- Begin Header --> 
    31. 
	
  31. 
		<header> 
    32. 
	
  32. 
		   
    33. 
	
  33. 
		<!-- Begin Contact Section --> 
    34. 
	
  34. 
		<section id="contact-details"> 
    35. 
	
  35. 
		   
    36. 
	
  36. 
		<!-- Begin Profile Image Section --> 
    37. 
	
  37. 
		<div class="header_1"> 
    38. 
	
  38. 
		<img src="images/profile.jpg" width="250" height="250" alt="Your Name" /> 
    39. 
	
  39. 
		</div> 
    40. 
	
  40. 
		<!-- End Profile Image Section --> 
    41. 
	
  41. 
		   
    42. 
	
  42. 
		<!-- Begin Profile Information Section --> 
    43. 
	
  43. 
		<div class="header_2"> 
    44. 
	
  44. 
		   
    45. 
	
  45. 
		<h1><span>Your Name</span></h1> 
    46. 
	
  46. 
		<h3>Web Developer / Designer</h3> 
    47. 
	
  47. 
		   
    48. 
	
  48. 
		<ul class="info_1"> 
    49. 
	
  49. 
		<li class="address">555 Street Address, Toledo, Ohio, 43606  U.S.A.</li> 
    50. 
	
  50. 
		</ul> 
    51. 
	
  51. 
		   
    52. 
	
  52. 
		<ul class="info_2"> 
    53. 
	
  53. 
		<li class="phone">(000) 000-0000</li> 
    54. 
	
  54. 
		<li class="email"><a href="mailto:your-email@gmail.com">your-email@gmail.com</a></li> 
    55. 
	
  55. 
		<li class="site_url"><a href="http://www.webcodepro.net/about.php" title="www.your-website.com">www.your-website.com</a></li> 
    56. 
	
  56. 
		<li class="twitter"><a href="http://twitter.com/twitter-screen-name" title="Follow Me on Twitter">@twitter-screen-name</a></li> 
    57. 
	
  57. 
		</ul> 
    58. 
	
  58. 
		   
    59. 
	
  59. 
		</div> 
    60. 
	
  60. 
		<!-- End Profile Information Section --> 
    61. 
	
  61. 
		   
    62. 
	
  62. 
		</section> 
    63. 
	
  63. 
		<!-- End Contact Section --> 
    64. 
	
  64. 
		   
    65. 
	
  65. 
		</header> 
    66. 
	
  66. 
		<!-- End Header --> 
    67. 
	
  67. 
		   
    68. 
	
  68. 
		<div class="clear"> </div> 
    69. 
	
  69. 
		   
    70. 
	
  70. 
		<!-- Begin Profile Section --> 
    71. 
	
  71. 
		<dl> 
    72. 
	
  72. 
		<dt>Profile:</dt> 
    73. 
	
  73. 
		<dd> 
    74. 
	
  74. 
		   
    75. 
	
  75. 
		<section class="summary"> 
    76. 
	
  76. 
		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.  
    77. 
	
  77. 
		</section> 
    78. 
	
  78. 
		   
    79. 
	
  79. 
		</dd> 
    80. 
	
  80. 
		</dl> 
    81. 
	
  81. 
		<!-- End Profile Section --> 
    82. 
	
  82. 
		   
    83. 
	
  83. 
		<div class="clear"> </div> 
    84. 
	
  84. 
		   
    85. 
	
  85. 
		<!-- Begin Skills Section --> 
    86. 
	
  86. 
		   
    87. 
	
  87. 
		<dl> 
    88. 
	
  88. 
		<dt>Skills:</dt> 
    89. 
	
  89. 
		<dd> 
    90. 
	
  90. 
		   
    91. 
	
  91. 
		<section id="skills"> 
    92. 
	
  92. 
		<ul class="list1"> 
    93. 
	
  93. 
		<li>XHTML</li> 
    94. 
	
  94. 
		<li>HTML5</li> 
    95. 
	
  95. 
		<li>PHP</li> 
    96. 
	
  96. 
		<li>JavaScript</li> 
    97. 
	
  97. 
		<li>Magento</li> 
    98. 
	
  98. 
		<li>WordPress</li> 
    99. 
	
  99. 
		</ul> 
    100. 
	
  100. 
		<ul class="list2"> 
    101. 
	
  101. 
		<li>HTML</li> 
    102. 
	
  102. 
		<li>CSS</li> 
    103. 
	
  103. 
		<li>MySQL</li> 
    104. 
	
  104. 
		<li>jQuery</li> 
    105. 
	
  105. 
		<li>CMS Made Simple</li> 
    106. 
	
  106. 
		<li>Photoshop</li> 
    107. 
	
  107. 
		</ul> 
    108. 
	
  108. 
		</section> 
    109. 
	
  109. 
		   
    110. 
	
  110. 
		</dd> 
    111. 
	
  111. 
		</dl> 
    112. 
	
  112. 
		   
    113. 
	
  113. 
		<!-- End Skills Section --> 
    114. 
	
  114. 
		   
    115. 
	
  115. 
		<div class="clear"> </div> 
    116. 
	
  116. 
		   
    117. 
	
  117. 
		<!-- Begin Experience Section --> 
    118. 
	
  118. 
		<dl> 
    119. 
	
  119. 
		<dt>Experience:</dt> 
    120. 
	
  120. 
		   
    121. 
	
  121. 
		<dd> 
    122. 
	
  122. 
		   
    123. 
	
  123. 
		<section id="experience"> 
    124. 
	
  124. 
		   
    125. 
	
  125. 
		<!-- Position #1 --> 
    126. 
	
  126. 
		   
    127. 
	
  127. 
		<h2 class="top">Web Developer / Designer</h2> 
    128. 
	
  128. 
		<p class="bus1">Company Name 1</p> 
    129. 
	
  129. 
		<p class="time">February 2009 - Present</p> 
    130. 
	
  130. 
		   
    131. 
	
  131. 
		<p> 
    132. 
	
  132. 
		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.  
    133. 
	
  133. 
		</p> 
    134. 
	
  134. 
		   
    135. 
	
  135. 
		<!-- Position #2 --> 
    136. 
	
  136. 
		   
    137. 
	
  137. 
		<h2>Web Developer / Programmer</h2> 
    138. 
	
  138. 
		<p class="bus1">Company Name 2</p> 
    139. 
	
  139. 
		<p class="time">November 2007 - February 2009</p> 
    140. 
	
  140. 
		   
    141. 
	
  141. 
		<p> 
    142. 
	
  142. 
		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.  
    143. 
	
  143. 
		</p> 
    144. 
	
  144. 
		   
    145. 
	
  145. 
		<!-- Position #3 --> 
    146. 
	
  146. 
		   
    147. 
	
  147. 
		<h2>Web Developer / Programmer</h2> 
    148. 
	
  148. 
		<p class="bus1">Company Name 3</p> 
    149. 
	
  149. 
		<p class="time">March 2006 - November 2007</p> 
    150. 
	
  150. 
		   
    151. 
	
  151. 
		<p> 
    152. 
	
  152. 
		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.  
    153. 
	
  153. 
		</p> 
    154. 
	
  154. 
		   
    155. 
	
  155. 
		</section> 
    156. 
	
  156. 
		   
    157. 
	
  157. 
		</dd> 
    158. 
	
  158. 
		</dl> 
    159. 
	
  159. 
		<!-- End Experience Section --> 
    160. 
	
  160. 
		   
    161. 
	
  161. 
		<div class="clear"> </div> 
    162. 
	
  162. 
		   
    163. 
	
  163. 
		<!-- Begin Publications Section --> 
    164. 
	
  164. 
		<dl> 
    165. 
	
  165. 
		<dt>Publications:</dt> 
    166. 
	
  166. 
		   
    167. 
	
  167. 
		<dd> 
    168. 
	
  168. 
		   
    169. 
	
  169. 
		<section id="publications"> 
    170. 
	
  170. 
		   
    171. 
	
  171. 
		<a href="http://net.tutsplus.com/tutorials/php/how-to-create-an-advanced-twitter-widget/" target="_blank" title="How to Create an Advanced Twitter Widget">"How to Create an Advanced Twitter Widget"</a>, <a href="http://net.tutsplus.com/" target="_blank" title="Nettuts+">Nettuts+</a>, 8/25/11  
    172. 
	
  172. 
		   
    173. 
	
  173. 
		</section> 
    174. 
	
  174. 
		   
    175. 
	
  175. 
		</dd> 
    176. 
	
  176. 
		</dl> 
    177. 
	
  177. 
		<!-- End Publications Section --> 
    178. 
	
  178. 
		   
    179. 
	
  179. 
		<div class="clear"> </div> 
    180. 
	
  180. 
		   
    181. 
	
  181. 
		<!-- Begin Education Section --> 
    182. 
	
  182. 
		<dl> 
    183. 
	
  183. 
		<dt>Education:</dt> 
    184. 
	
  184. 
		<dd> 
    185. 
	
  185. 
		   
    186. 
	
  186. 
		<section id="education"> 
    187. 
	
  187. 
		   
    188. 
	
  188. 
		<p class="bus1">University of Toledo</p> 
    189. 
	
  189. 
		   
    190. 
	
  190. 
		2801 Bancroft Street  
    191. 
	
  191. 
		<br /> 
    192. 
	
  192. 
		Toledo, Ohio, 43606  U.S.A.  
    193. 
	
  193. 
		   
    194. 
	
  194. 
		<p class="summary">Web Design</p> 
    195. 
	
  195. 
		<p class="time">2003 - 2005</p> 
    196. 
	
  196. 
		   
    197. 
	
  197. 
		<p class="edu-info"> 
    198. 
	
  198. 
		<a href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a> 
    199. 
	
  199. 
		</p> 
    200. 
	
  200. 
		   
    201. 
	
  201. 
		</section> 
    202. 
	
  202. 
		   
    203. 
	
  203. 
		</dd> 
    204. 
	
  204. 
		</dl> 
    205. 
	
  205. 
		<!-- End Education Section --> 
    206. 
	
  206. 
		   
    207. 
	
  207. 
		<div class="clear"> </div> 
    208. 
	
  208. 
		   
    209. 
	
  209. 
		<!-- Begin Footer --> 
    210. 
	
  210. 
		<footer id="footer"> 
    211. 
	
  211. 
		   
    212. 
	
  212. 
		<!-- Begin Footer Content --> 
    213. 
	
  213. 
		<div class="footer_content"> 
    214. 
	
  214. 
		   
    215. 
	
  215. 
		<!-- Begin Schema Person --> 
    216. 
	
  216. 
		   
    217. 
	
  217. 
		<ul class="icons_1"> 
    218. 
	
  218. 
		<li><a href="https://profiles.google.com/jwagner719" title="Google Profile"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32" alt="Google Profile"></a></li> 
    219. 
	
  219. 
		<li><a href="http://dribbble.com/" title="Dribbble"><img src="images/dribbble.png" width="32" height="32" alt="Dribbble" /></a></li> 
    220. 
	
  220. 
		<li><a href="http://www.linkedin.com/" title="LinkedIn"><img src="images/linkedin.png" width="32" height="32" alt="LinkedIn" /></a></li> 
    221. 
	
  221. 
		<li><a href="http://www.facebook.com/" title="Facebook"><img src="images/facebook.png" width="32" height="32" alt="Facebook" /></a></li> 
    222. 
	
  222. 
		<li><a href="http://www.flickr.com/" title="Flickr"><img src="images/flickr.png" width="32" height="32" alt="Flickr" /></a></li> 
    223. 
	
  223. 
		<li><a href="http://twitter.com/" title="Follow Me on Twitter!"><img src="images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li> 
    224. 
	
  224. 
		</ul> 
    225. 
	
  225. 
		   
    226. 
	
  226. 
		<ul class="icons_2"> 
    227. 
	
  227. 
		<li><a href="resume.pdf" title="Download Resume PDF"><img src="images/download.png" width="48" height="48" alt="Download Resume PDF" /></a></li> 
    228. 
	
  228. 
		</ul> 
    229. 
	
  229. 
		   
    230. 
	
  230. 
		<!-- End Schema Person --> 
    231. 
	
  231. 
		   
    232. 
	
  232. 
		</div> 
    233. 
	
  233. 
		<!-- End Footer Content --> 
    234. 
	
  234. 
		   
    235. 
	
  235. 
		<div class="credits"> 
    236. 
	
  236. 
		Social Icons by <a href="http://paulrobertlloyd.com/2009/06/social_media_icons" target="_blank" title="Paul Robert Lloyd">Paul Robert Lloyd</a>, Profile & Download Icons by <a href="http://dryicons.com/" target="_blank" title="DryIcons">DryIcons</a>, Phone Icon by <a href="http://www.comfi.com/telecom-icons/" target="_blank" title="ComFi Telecom">ComFi Telecom</a>, Profile Image User Symbol by <a href="http://thenounproject.com/" target="_blank" title="The Noun Project">The Noun Project</a>.  
    237. 
	
  237. 
		<br /> 
    238. 
	
  238. 
		All used under a Creative Commons Attribution-ShareAlike license: <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank" title="Creative Commons Attribution-ShareAlike license">http://creativecommons.org/licenses/by-sa/3.0/</a> 
    239. 
	
  239. 
		</div> 
    240. 
	
  240. 
		   
    241. 
	
  241. 
		</footer> 
    242. 
	
  242. 
		<!-- End Footer --> 
    243. 
	
  243. 
		   
    244. 
	
  244. 
		</div> 
    245. 
	
  245. 
		<!-- End Content --> 
    246. 
	
  246. 
		   
    247. 
	
  247. 
		</div> 
    248. 
	
  248. 
		<!-- End Wrapper --> 
    249. 
	
  249. 
		   
    250. 
	
  250. 
		</body> 
    251. 
	
  251. 
		</html> 
    252. 



			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机