您现在的位置是:网站首页> 编程资料编程资料

HTML5几个设计和修改的页面范例分享简单的HTML5初步入门教程基于HTML5实现的带左右箭头可拖动幻灯片特效源码基于html5 canvas逼真下雪场景动画特效源码 6种特效

2023-10-14 430人已围观

简介 这篇文章主要介绍了HTML5几个设计和修改的页面范例分享,主要针对普通页面使用HTML5进行润色的工作,需要的朋友可以参考下

要了解和熟悉 HTML5 中的新的语义元素,最好的方式就是拿一经典的 HTML 文档作例子,然后把 HTML5 的一些新鲜营养充实进入。如下就是我们要改造的页面,该页面很简单,只包含一篇文章。

ApocalypsePage_Original.html,这是一个格式非常规范的页面,所有的样式均来自于外部样式表。

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html lang="zh-CN">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Apocalypse Nowtitle>  
  6.   <link rel="stylesheet" href="ApocalypsePage_Original.css">  
  7. head>  
  8.   
  9. <body>  
  10. <div class="Header">  
  11.   <h1>How the World Could Endh1>  
  12.   <p class="Teaser">Scenarios that spell the end of life as we knowp>  
  13.   <p class="Byline">by Ray N. Carnationp>  
  14. div>  
  15.   
  16. <div class="Content">  
  17.   <p><span class="LeadIn">Right nowspan>, you're probably feeling pretty good. After all, life in the developed world is comfortable<span class="style1">span>probably more comfortable than it's been for the average human being throughout all of recorded history.p>  
  18.   <p>But don't get too smug. There's still plenty of horrific ways it could all fall apart. In this article, you'll learn about a few of our favorites.p>  
  19.      
  20.   <h2>Mayan Doomsdayh2>  
  21.   <p>Skeptics suggest that the Mayan calendar simply rolls to a new 5,126-year era after 2012, and doesn't actually predict a life-ending apocalypse. But given that the long-dead Mayans were wrong about virtually everything else, why should we trust them on this?p>  
  22.      
  23.   <h2>Robot Takeoverh2>  
  24.   <p>Not quite as frightening as a Vampire Takeover or Living-Dead Takeover, a robot rebellion is still a disquieting thought. We are already outnumbered by our technological gadgets, and even Bill Gates fears the day his Japanese robot slave turns him over by the ankles and asks (in a suitably robotic voice) "Who's your daddy now?"p>  
  25.      
  26.   <h2>Unexplained Singularityh2>  
  27.   <p>We don't know how the universe started, so we can't be sure it won't just end, maybe today, and maybe with nothing more exciting than a puff of anti-matter and a slight fizzing noise.p>  
  28.      
  29.   <h2>Runaway Climate Changeh2>  
  30.   <p>Dismissed by some, Al Gore's prophecy of doom may still come true. If it does, we may have to contend with vicious storms, widespread food shortages, and surly air conditioning repairmen.p>  
  31.      
  32.   <h2>Global Epidemic
-六神源码网