suchen

Heim >Web-Frontend >H5-Tutorial >Teilen Sie mehrere Seitenbeispiele für HTML5-Design und -Modifikation_HTML5-Tutorial-Fähigkeiten

Teilen Sie mehrere Seitenbeispiele für HTML5-Design und -Modifikation_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:46:271853Durchsuche

Um die neuen semantischen Elemente in HTML5 zu verstehen und sich mit ihnen vertraut zu machen, nehmen Sie am besten ein klassisches HTML-Dokument als Beispiel und bereichern es dann mit einigen frischen Nährstoffen von HTML5. Die folgende Seite ist sehr einfach und enthält nur einen Artikel.

ApocalypsePage_Original.html, dies ist eine Seite mit einem sehr standardisierten Format und alle Stile stammen von externen Stylesheets.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html lang="zh- CN">  
  3. <Kopf>  
  4.   <meta charset="utf- 8">  
  5.   <Titel>Apocalypse NowTitel>  
  6.   <link rel="stylesheet"  href="ApocalypsePage_Original.css">  
  7. Kopf>  
  8.   
  9. <Körper>  
  10. <div class="Header" >  
  11.   <h1>Wie die Welt untergehen könnteh1>  
  12.   <p Klasse="Teaser" >Szenarien, die, wie wir wissen, das Ende des Lebens bedeutenp>  
  13.   <p class="Byline" >von Ray N. Carnationp>  
  14. div>   
  15.   
  16. <div class="Inhalt" >  
  17.   <p><span Klasse="LeadIn">Im Momentspan>, du fühlst dich wahrscheinlich ziemlich gut. Schließlich ist das Leben in der entwickelten Welt angenehm >"style1">—span>wahrscheinlich komfortabler als es für den durchschnittlichen Menschen in der gesamten aufgezeichneten Geschichte war.p>     <p>Aber werden nicht zu selbstgefällig. Es gibt immer noch viele schreckliche Möglichkeiten, wie alles auseinanderfallen könnte. In diesem Artikel erfahren Sie mehr über einige unserer Favoriten.
    18. p>           <h2>
  18. Maya-Weltuntergang
    19. h2>     <p>Skeptiker vermuten, dass der Maya-Kalender einfach in eine neue Ära von 5.126 Jahren übergeht nach 2012 und sagt nicht wirklich eine lebensvernichtende Apokalypse voraus. Aber angesichts der Tatsache, dass die längst verstorbenen Mayas in praktisch allem anderen Unrecht hatten, warum sollten wir ihnen in dieser Hinsicht vertrauen?p>            <h2>
  19. Roboterübernahme
    20. h2>     <p>Nicht ganz so beängstigend wie eine Übernahme durch einen Vampir oder eine Übernahme durch lebende Tote, a Roboteraufstand ist immer noch ein beunruhigender Gedanke. Wir sind durch unsere technischen Geräte bereits zahlenmäßig unterlegen, und selbst Bill Gates hat Angst vor dem Tag, an dem sein japanischer Robotersklave ihn an den Knöcheln umdreht und (mit angemessener Roboterstimme) fragt: „Wer ist jetzt dein Papa?“< /
  20. p>           <h2
    21. >
  21. Unerklärte Singularität
    22. h2>  
  22.   <p>Wir wissen nicht, wie das Universum begann, also können wir es nicht Stellen Sie sicher, dass es nicht einfach endet, vielleicht heute, und vielleicht mit nichts Aufregenderem als einem Hauch von Antimaterie und einem leichten zischenden Geräusch.p >  
  23.      
  24.   <h2>Unkontrollierter Klimawandel h2>  
  25.   <p>Von einigen abgelehnt, könnte sich Al Gores Unheilsprophezeiung dennoch erfüllen. Wenn das der Fall ist, müssen wir uns möglicherweise mit heftigen Stürmen, weit verbreiteter Nahrungsmittelknappheit und mürrischen Reparaturarbeitern für Klimaanlagen herumschlagen.p>   
  26.      
  27.   <h2>Globale Epidemieh2>  
  28.   <p>Irgendwann in der Zukunft könnte ein tödlicher Virus zuschlagen. Über die Quelle der Krankheit gehen die Vorhersagen auseinander, aber zu den Kandidaten zählen Affen im afrikanischen Dschungel, Bioterroristen, Vögel und Schweine mit der Grippe, Krieger aus der Zukunft, eine außerirdische Rasse, Krankenhäuser, die zu viele Antibiotika verwenden, Vampire, die CIA usw ungewaschen Rosenkohl. Was auch immer die Quelle sein mag, es sind eindeutig schlechte Nachrichten.p>  
  29.   
  30. div>   
  31.   
  32. <div class="Footer" >  
  33.   <p Klasse="Haftungsausschluss" >Diese apokalyptischen Vorhersagen spiegeln nicht die Ansichten des Autors wider.p>   
  34.   <p>  
  35.     <a href="AboutUs. html">Über unsa>  
  36.     <a href="Haftungsausschluss. html">Haftungsausschlussa>  
  37.     <a href="ContactUs. html">Kontaktieren Sie unsa>  
  38.   p>  
  39.   <p>Copyright © 2014 p>  
  40. div>   
  41. Körper>  
  42. html>  

在不增加任何 CSS 样式表之前，效果如下：

上面通过三个

将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚.

这个例子中的样式表很简单,整个页面最大宽度设置为 800 像素,避免文本在宽屏显示器上显示过长.页眉位于一个带有蓝色边框的盒子中,内容区的两侧都增加了内边距，而页脚在整个页面的底部居中.

ApocalypsePage_Original.css样式文件内容如下：

XML/HTML-Code复制内容到剪贴板
  1. @charset "utf-8"
  2. /* CSS-Dokument */
  3. Körper{
  4. /*font-family Um sichere Schriftarten zu verwenden, folgen Sie dem Prinzip „Speziell zuerst und dann allgemein“,
  5. Geben Sie zuerst die gewünschte Schriftart ein, dann eine sicherere Schriftart,
  6. Endet schließlich mit serifenloser Schriftart*/
  7. Schriftfamilie: „Lucida sans Unicode“, „Lucida Grande“, Genf, serifenlos
  8. max-width: 800px; /*Die maximale Breite überschreitet nicht 800 Pixel*/
  9. }
  10. /*Titelbereichsstil oben auf der Seite*/
  11. .Header {
  12. Hintergrundfarbe: #7695FE; /*Jeder Farbwert ist akzeptabel*/
  13. Rahmen: dünn #336699 einfarbig; /*All-in-One-Rahmenattribut*/
  14. Innenabstand: 10 Pixel; /* 10 Pixel Innenabstand, der Abstand zwischen dem Rand und dem Inhalt*/
  15. Rand: 10 Pixel; /* 10 Pixel Rand, der Abstand zwischen dem Rand und umgebenden Elementen*/
  16. text-align: center; /*Kopfzeilentext ist zentriert*/
  17. }
  18. /*Titel in der Kopfzeile<h1>Stil*/
  19. .Header h1{
  20. Rand: 0px;
  21. Farbe: weiß;
  22. Schriftgröße: xx-large; /*Präzise Steuerung kann in Pixeln oder EM-Einheiten erfolgen*/
  23. }
  24. /*Header-Untertitelstil*/
  25. .Header .Teaser{
  26. Rand: 0px;
  27. Schriftstärke: fett;
  28. }
  29. /*Signaturzeilenstil in der Kopfzeile*/
  30. .Header .Byline{
  31. Schriftstil: kursiv;
  32. Schriftgröße: klein;
  33. Rand: 0px;
  34. }
  35. .Content{
  36. Schriftgröße: mittel;
  37. Schriftfamilie: Cambria, Cochin, Georgia, „Times New Roman“, Times, Serife;
    38. /*Maximale linke und rechte Polsterung*/
    39. padding-top: 20px
    40. padding-right: 50px
    41. padding-bottom: 5px
    42. padding-left: 50px
    43. Zeilenhöhe: 120 %; /*Der Abstand zwischen zwei benachbarten Textzeilen*/
    44. }
    45. .Content .LeadIn{
    46. Schriftstärke: fett;
    47. Schriftgröße: groß;
    48. Schriftvariante: Kapitälchen;
    49. }
    50. .Content .h2{
    51. Farbe: #24486C;
  51. Rand unten: 2px;
    52. Schriftgröße: mittel;
    53. }
    54. .Content p{
    55. margin-top: 0px;
  55. }
  56. .Footer{
  57. text-align: center;
  58. Schriftgröße: x-klein;
  59. }
  60. .Footer .Disclaimer{
  61. Schriftstil: kursiv;
  62. }
  63. .Footer p{
  64. Rand: 3px;
  65. }

Auf diese Weise wurde unser Stylesheet gebogen. Nun wollen wir sehen, was das Ergebnis sein wird. Wie unten gezeigt:

Verwenden Sie HTML5, um die Seite zu erstellen

Immer noch ein unverzichtbares Element im Webdesign, ist es ein intuitiver, vielseitiger Container, der es Ihnen ermöglicht, Stile auf jeden Block auf der Seite anzuwenden. Das Problem mit
ist jedoch, dass es selbst keine Informationen über die Seite widerspiegelt.

Um diese Situation mit HTML5 zu verbessern, ersetzen Sie

durch ein Element mit aussagekräftigerer Semantik.

In ApocalypsePage_Revised.html wurden die Klassenattribute von Header und Footer und

durch
ersetzt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Kopfzeile>  
  2.   <h1>Wie die Welt untergehen könnteh1>  
  3.   <p Klasse="Teaser" >Szenarien, die, wie wir wissen, das Ende des Lebens bedeutenp>  
  4.   <p class="Byline" >von Ray N. Carnationp>  
  5. Header>  
  6. ...   
  7. <Fußzeile>  
  8.   <p Klasse="Haftungsausschluss" >Diese apokalyptischen Vorhersagen spiegeln nicht die Ansichten des Autors wider.p>   
  9.   <p>  
  10.     <a href="AboutUs. html">Über unsa>  
  11. ...   
  12.   p>  
  13.   <p>Copyright © 2014 p>  
  14. Fußzeile>  

当然, 对应的 ApocalypsePage_Revised.css 文件也需要进行修改, 将其中的 .Header 和 .Footer 替换为 header 和 footer如下:

XML/HTML-Code复制内容到剪贴板
  1. /*Titelbereichsstil oben auf der Seite*/
  2. Kopfzeile {
  3. Hintergrundfarbe: #7695FE; /*Jeder Farbwert ist akzeptabel*/
  4. Rahmen: dünn #336699 einfarbig; /*All-in-One-Rahmenattribut*/
  5. Innenabstand: 10 Pixel; /* 10 Pixel Innenabstand, der Abstand zwischen dem Rand und dem Inhalt*/
  6. Rand: 10 Pixel; /* 10 Pixel Rand, der Abstand zwischen dem Rand und umgebenden Elementen*/
  7. text-align: center; /*Kopfzeilentext ist zentriert*/
  8. }
  9. /*Titel in der Kopfzeile<h1>Stil*/
  10. Header h1{
  11. Rand: 0px;
  12. Farbe: weiß;
  13. Schriftgröße: xx-large; /*Präzise Steuerung kann in Pixeln oder EM-Einheiten erfolgen*/
  14. }

Schließlich gibt es noch ein Element, das in der Beispieldatei verwendet werden muss, nämlich das Element

, das einen vollständigen, in sich geschlossenen Inhalt darstellt.

Das

-Element sollte den Inhalt eines Nachrichtenberichts oder Artikels enthalten, einschließlich Titel, Byline und Text. Die Struktur nach dem Hinzufügen des

-Elements ist also wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Artikel>  
  2.   <Kopfzeile>  
  3.   <h1>Wie die Welt untergehen könnteh1>  
  4.   <p Klasse="Teaser" >Szenarien, die, wie wir wissen, das Ende des Lebens bedeutenp>  
  5.   <p class="Byline" >von Ray N. Carnationp>  
  6.   Kopfzeile>  
  7.   <div class="Inhalt" >  
  8.   <p><span Klasse="LeadIn">Im Momentspan>, du fühlst dich wahrscheinlich ziemlich gut. Schließlich ist das Leben in der entwickelten Welt angenehm >"style1">—span>wahrscheinlich komfortabler als es für den durchschnittlichen Menschen in der gesamten aufgezeichneten Geschichte war.p>   ...      div
    9. >
    10.   
  10. Artikel>  
  11. 重新设计后，页面结构如下： 用
    添加插图
很多页面都是包含图片的.但是,插图 (Abbildung)但是文本中会提到它.
一般来说插图应该是浮动的,还会有浮动图题.下面是在文章中添加插图的. 标记，在正文的第一段和第二段之间的位置，部分代码如下:



XML/HTML-Code

复制内容到剪贴板

  1. ...   
  2. <div class="Inhalt" >  
  3. <p><span Klasse="LeadIn">Im Momentspan>, du bist ...p>   
  4. <div class="FloatFigure" >  
  5. <img src="human_skull. jpg" alt="Menschlicher Schädel">  
  6. <p>Werden Sie der letzte überstehende Mensch sein, wenn einer dieser apokalyptischen   
  7. Szenarien spielen sich ab?p>  
  8. div>  
  9. <p>Aber werden nicht zu selbstgefällig. Es gibt...p>  
  10. ...  


相应的 样式表规则如下：

XML/HTML-Code复制内容到剪贴板
  1. .FloatFigure{   
  2.   float: links;   
  3.   Rand: 0px 20px 0px 0px;   
  4. }   
  5. .FloatFigure p{   
  6.   maximale Breite: 300 Pixel;   
  7.   Schriftgröße: klein;   
  8.   Schriftstil: kursiv;   
  9.   margin-bottom: 5px;   
  10. }  


下图展示了这个示例的外观,插图恰好在第一段文本之后,浮动在后面文本的左侧,图题的文本的宽度我们限制住了,让图题显示很充实、很优雅.

HTML5 中提供了一个

元素，图题可以放在
中的
元素里，经过改造，代码如下：

XML/HTML-Code复制内容到剪贴板
  1. <figure class="FloatFigure" >
  2. <img src="human_skull. jpg" alt="Menschlicher Schädel">
  3. <figcaption>Werden Sie die letzte Person sein, die noch übrig ist, wenn einer dieser apokalyptischen
  4. Szenarien spielen sich ab?figcaption>
  5. Abbildung>


Natürlich kann der Selektor im Stylesheet entsprechend geändert werden.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. .FloatFigure{
  2. float: links;
  3. Rand: 0px 20px 0px 0px;
    4. }
    5. .FloatFigure figcaption{
    6. maximale Breite: 300px
    7. Schriftgröße: klein;
    8. Schriftstil: kursiv;
    9. Rand unten: 5px;
  9. }
Abschließend kann das Alt-Attribut im -Element gelöscht werden, da der Titel eine vollständige Beschreibung des Bildes enthält.

Fügen Sie eine Notiz mit hinzu

Das neue

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Tutorial zur Verwendung von Localstorage in HTML5_HTML5-Tutorial-FähigkeitenNächster Artikel：Tutorial zur Verwendung von Localstorage in HTML5_HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen