返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

HTML5几个设计和修改的页面范例分享

2019-01-28 15:52:21于海丽

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

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>   <html lang="zh-CN">  
  2. <head>     <meta charset="utf-8">  
  3.   <title>Apocalypse Now</title>     <link rel="stylesheet" href="ApocalypsePage_Original.css">  
  4. </head>     
  5. <body>   <div class="Header">  
  6.   <h1>How the World Could End</h1>     <p class="Teaser">Scenarios that spell the end of life as we know</p>  
  7.   <p class="Byline">by Ray N. Carnation</p>   </div><!-- end Header -->  
  8.    <div class="Content">  
  9.   <p><span class="LeadIn">Right now</span>, 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>     <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>  
  10.         <h2>Mayan Doomsday</h2>  
  11.   <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>        
  12.   <h2>Robot Takeover</h2>     <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>  
  13.         <h2>Unexplained Singularity</h2>  
  14.   <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>        
  15.   <h2>Runaway Climate Change</h2>     <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>  
  16.         <h2>Global Epidemic</h2>  
  17.   <p>Some time in the future, a lethal virus could strike. Predictions differ about the source of the disease, but candidates include monkeys in the African jungle, bioterrorists, birds and pigs with the flu, warriors from the future, an alien race, hospitals that use too many antibiotics, vampires, the CIA, and unwashed brussel sprouts. Whatever the source, it's clearly bad news.</p>     
  18. </div><!-- end Content -->     
  19. <div class="Footer">     <p class="Disclaimer">These apocalyptic predictions do not reflect the views of the author.</p>  
  20.   <p>       <a href="AboutUs.html">About Us</a>  
  21.     <a href="Disclaimer.html">Disclaimer</a>       <a href="ContactUs.html">Contact Us</a>  
  22.   </p>     <p>Copyright © 2014</p>  
  23. </div><!-- end Footer -->   </body>  
  24. </html>  
相关文章 大家在看