HTML5几个设计方案和改动的网页页面案例共享

日期:2021-01-19 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

要掌握和熟习 HTML5 中的新的词义元素,最好是的方法便是拿1經典的 HTML 文本文档作事例,随后把 HTML5 的1些新鮮营养成分丰富进到。以下便是大家要更新改造的网页页面,该网页页面很简易,只包括1篇文章内容。

ApocalypsePage_Original.html,这是1个文件格式十分标准的网页页面,全部的款式均来自于外界款式表。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="zh-CN">  
  3. <head>  
  4.   <meta charset="utf⑻">  
  5.   <title>Apocalypse Now</title>  
  6.   <link rel="stylesheet" href="ApocalypsePage_Original.css">  
  7. </head>  
  8.   
  9. <body>  
  10. <div class="Header">  
  11.   <h1>How the World Could End</h1>  
  12.   <p class="Teaser">Scenarios that spell the end of life as we know</p>  
  13.   <p class="Byline">by Ray N. Carnation</p>  
  14. </div><!-- end Header -->  
  15.   
  16. <div class="Content">  
  17.   <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>  
  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 Doomsday</h2>  
  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 Takeover</h2>  
  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 Singularity</h2>  
  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 Change</h2>  
  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</h2>  
  33.   <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>  
  34.   
  35. </div><!-- end Content -->  
  36.   
  37. <div class="Footer">  
  38.   <p class="Disclaimer">These apocalyptic predictions do not reflect the views of the author.</p>  
  39.   <p>  
  40.     <a href="AboutUs.html">About Us</a>  
  41.     <a href="Disclaimer.html">Disclaimer</a>  
  42.     <a href="ContactUs.html">Contact Us</a>  
  43.   </p>  
  44.   <p>Copyright © 2014</p>  
  45. </div><!-- end Footer -->  
  46. </body>  
  47. </html>  

在不提升任何 CSS 款式表以前,实际效果以下:

上面根据3个 <div> 将网页页面分为了3个一部分,顶部的页眉,中部的內容和底部的页脚。

这个事例中的款式表很简易,全部网页页面最大宽度设定为 800 像素,防止文字在宽屏显示信息器上显示信息太长。页眉坐落于1个带有蓝色边框的盒子中,內容区的两边都提升了内边距,而页脚在全部网页页面的底部垂直居中。

ApocalypsePage_Original.css款式文档內容以下:

XML/HTML Code拷贝內容到剪贴板
  1. @charset "utf⑻";   
  2. /* CSS Document */   
  3. body{   
  4.   /*font-family 要应用安全性字体样式,依照先独特后1般的标准,   
  5.   先得出你要想的字体样式,随后是商业保险1些的字体样式,   
  6.   最终以 sans-serif 字体样式末尾*/   
  7.   font-family: "Lucida sans Unicode", "Lucida Grande", Geneva, sans-serif;   
  8.   max-width: 800px; /*最大宽度不超出 800 像素*/   
  9. }   
  10. /*网页页面顶部的题目区款式*/   
  11. .Header {   
  12.   background-color: #7695FE; /*可接纳任何色调值*/   
  13.   border: thin #336699 solid; /*多合1的 border 特性*/   
  14.   padding: 10px; /* 10像素的内边距,边框与內容之间的间距*/   
  15.   margin: 10px; /* 10像素的外边距,边框与周边元素之间的间距*/   
  16.   text-align: center; /*头顶部文字垂直居中*/   
  17. }   
  18. /*页眉中题目<h1>款式*/   
  19. .Header h1{   
  20.   margin: 0px;   
  21.   color: white;   
  22.   font-size: xx-large; /*精准操纵能够用像素或em企业*/   
  23. }   
  24. /*页眉中子题目款式*/   
  25. .Header .Teaser{   
  26.   margin: 0px;   
  27.   font-weight: bold;   
  28. }   
  29. /*页眉中落款行款式*/   
  30. .Header .Byline{   
  31.   font-style: italic;   
  32.   font-size: small;   
  33.   margin: 0px;   
  34. }   
  35. .Content{   
  36.   font-size: medium;   
  37.   font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif;   
  38.   /*上下内边距最大*/   
  39.   padding-top: 20px;   
  40.   padding-right: 50px;   
  41.   padding-bottom: 5px;   
  42.   padding-left: 50px;   
  43.   line-height: 120%; /*邻近两个文字行之间的间距*/   
  44. }   
  45. .Content .LeadIn{   
  46.   font-weight: bold;   
  47.   font-size: large;   
  48.   font-variant: small-caps;   
  49. }   
  50. .Content .h2{   
  51.   color: #24486C;   
  52.   margin-bottom: 2px;   
  53.   font-size: medium;   
  54. }   
  55. .Content p{   
  56.   margin-top: 0px;   
  57. }   
  58. .Footer{   
  59.   text-align: center;   
  60.   font-size: x-small;   
  61. }   
  62. .Footer .Disclaimer{   
  63.   font-style: italic;   
  64. }   
  65. .Footer p{   
  66.   margin: 3px;   
  67. }  

这样大家的款式表就弯沉过了,如今去看看結果会如何呢?以下图:

应用 HTML5 来结构网页页面

<div> 现阶段依然是 Web 设计方案的必备元素,它是1个直观、多主要用途的器皿,能够根据它为网页页面中的任何区块运用款式。但 <div> 的难题在于,它自身不反应与网页页面有关的任何信息内容。

要根据 HTML5 改善这类状况,能够把 <div> 更换成更具备叙述性词义的元素。

ApocalypsePage_Revised.html中早已将 class 特性为 Header 和 Footer 两个 <div> 更换为 <header> 和 <footer>, 一部分编码以下:

XML/HTML Code拷贝內容到剪贴板
  1. <header>  
  2.   <h1>How the World Could End</h1>  
  3.   <p class="Teaser">Scenarios that spell the end of life as we know</p>  
  4.   <p class="Byline">by Ray N. Carnation</p>  
  5. </header>  
  6. ...   
  7. <footer>  
  8.   <p class="Disclaimer">These apocalyptic predictions do not reflect the views of the author.</p>  
  9.   <p>  
  10.     <a href="AboutUs.html">About Us</a>  
  11. ...   
  12.   </p>  
  13.   <p>Copyright © 2014</p>  
  14. </footer>  

自然,对应的 ApocalypsePage_Revised.css 文档也必须开展改动,将在其中的 .Header 和 .Footer 更换为 header 和 footer 。一部分编码以下:

XML/HTML Code拷贝內容到剪贴板
  1. /*网页页面顶部的题目区款式*/   
  2. header {   
  3.   background-color: #7695FE; /*可接纳任何色调值*/   
  4.   border: thin #336699 solid; /*多合1的 border 特性*/   
  5.   padding: 10px; /* 10像素的内边距,边框与內容之间的间距*/   
  6.   margin: 10px; /* 10像素的外边距,边框与周边元素之间的间距*/   
  7.   text-align: center; /*头顶部文字垂直居中*/   
  8. }   
  9. /*页眉中题目<h1>款式*/   
  10. header h1{   
  11.   margin: 0px;   
  12.   color: white;   
  13.   font-size: xx-large; /*精准操纵能够用像素或em企业*/   
  14. }  

最终也有1个元素必须用在示例文档中,便是 <article> 元素,表明1个详细的、自成1体的內容。

<ariticle>元素应当包括新闻报导或文章内容的內容,包含题目、落款和文章正文。因而加上了 <article> 元素后的构造以下:

XML/HTML Code拷贝內容到剪贴板
  1. <article>  
  2.   <header>  
  3.   <h1>How the World Could End</h1>  
  4.   <p class="Teaser">Scenarios that spell the end of life as we know</p>  
  5.   <p class="Byline">by Ray N. Carnation</p>  
  6.   </header>  
  7.   <div class="Content">  
  8.   <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>  
  9. ...   
  10.   </div><!-- end Content -->  
  11. </article>  


再次设计方案后,网页页面构造以下:

用 <figure> 加上插图

许多网页页面全是包括照片的。可是,插图 (figure) 与照片的定义还不彻底1样。插图尽管单独于文字,可是文字中会提到它。

1般来讲插图应当是波动的,还会有波动图题。下面是在文章内容中加上插图的 HTML 标识,在文章正文的第1段和第2段之间的部位,一部分编码以下:

XML/HTML Code拷贝內容到剪贴板
  1. ...   
  2. <div class="Content">  
  3. <p><span class="LeadIn">Right now</span>, you're ...</p>  
  4. <div class="FloatFigure">  
  5. <img src="human_skull.jpg" alt="Human skull">  
  6. <p>Will you be the last person standing if one of these apocalyptic   
  7. scenarios plays out?</p>  
  8. </div>  
  9. <p>But don't get too smug. There's...</p>  
  10. ...  


相应的 款式表标准以下:

XML/HTML Code拷贝內容到剪贴板
  1. .FloatFigure{   
  2.   float: left;   
  3.   margin: 0px 20px 0px 0px;   
  4. }   
  5. .FloatFigure p{   
  6.   max-width: 300px;   
  7.   font-size: small;   
  8.   font-style: italic;   
  9.   margin-bottom: 5px;   
  10. }  


下图展现了这个示例的外型,插图正好在第1段文字以后,波动在后边文字的左边,图题的文字的宽度大家限定住了,让图题显示信息很丰富、很雅致。

HTML5 中出示了1个 <figure> 元素,图题能够放在 <figure> 中的 <figcaption> 元素里,历经更新改造,编码以下:

XML/HTML Code拷贝內容到剪贴板
  1. <figure class="FloatFigure">  
  2.   <img src="human_skull.jpg" alt="Human skull">  
  3.   <figcaption>Will you be the last person standing if one of these apocalyptic   
  4.    scenarios plays out?</figcaption>  
  5. </figure>  


自然款式表格中的挑选符,相应改动1下便可。

XML/HTML Code拷贝內容到剪贴板
  1. .FloatFigure{   
  2.   float: left;   
  3.   margin: 0px 20px 0px 0px;   
  4. }   
  5. .FloatFigure figcaption{   
  6.   max-width: 300px;   
  7.   font-size: small;   
  8.   font-style: italic;   
  9.   margin-bottom: 5px;   
  10. }  


最终也有便是 <img> 元素中的 alt 特性能够删掉掉,由于图题中包括了照片的详细表明。

用 <aside> 加上附注

新的 <aside> 元素表明与它周边的文字沒有紧密关联的內容。能够根据它详细介绍另外一个有关的话题,或对主文本文档中提出的某个见解开展解释。还能够用来置放广告宣传、有关內容连接。

下面的示例中将用作醒目引文(pull quote),应用 <div> 元素能够造就这类实际效果,可是用 <aside> 元素让标识更成心义:

一部分编码以下:

XML/HTML Code拷贝內容到剪贴板
  1.   <p>... (in a suitably robotic voice) "Who's your daddy now?"</p>  
  2.   
  3. <aside class="PullQuote">  
  4.   <img src="quotes_start.png" alt="Quote">  
  5.   We don't know how the universe started, so we can't be sure it won't just end, maybe today.   
  6.   <img src="quotes_end.png" alt="End quote">  
  7. </aside>  
  8.   
  9. <h2>Unexplained Singularity</h2>  


对应的款式表內容以下:

XML/HTML Code拷贝內容到剪贴板
  1. .PullQuote{   
  2.   float: right;   
  3.   max-width: 300px;   
  4.   border-top: thin black solid;   
  5.   border-bottom: thick black solid;   
  6.   font-size: 30px;   
  7.   line-height: 130%;   
  8.   font-style: italic;   
  9.   padding-top: 5px;   
  10.   padding-bottom: 5px;   
  11.   margin-left: 15px;   
  12.   margin-bottom: 10px;   
  13. }   
  14. .PullQuote img{   
  15.   vertical-align: bottom;   
  16. }  
上一篇:手机微信手机游戏制做的必备3要素 返回下一篇:没有了