HTML5 <footer>-Tag-Element, HTML-Tutorial zum CSS-Layout der unteren Fußzeile-HTML-Tutorial-php.cn

HTML5 -Tag-Element fügt ein neues HTML5-Tag für das untere Fußzeilenelement in HTML 5 hinzu und versteht das Fußzeilen-CSS-Layout-Tutorial, um wirklich zu beherrschen und zu verstehen >Denken Sie daran: Als wir vor der vorherigen HTML5-Version das Urheberrecht unten auf der Webseite angegeben haben, waren wir es gewohnt, id="footer" oder class="footer" zu verwenden. Erfahren Sie mehr über HTML-Tutorial-Tags!

Zum Beispiel traditionelles

Aber in HTML5 wird dieser häufig verwendete Name „Fußzeile“ als HTML5-Element-Tag-Mitglied hinzugefügt.

1.

html5-Syntax -Struktur – TOP 1. Grammatik

3 >

4. Wissenserweiterung Wenn wir das Footer-Tag in der HTML5-Entwicklung verwenden, können wir es wie ein gewöhnliches div-Tag behandeln, es wird jedoch im Allgemeinen für das untere Layout der Website verwendet. Im Allgemeinen hat eine Webseite nur einen unteren Bereich, daher ist es am besten, die Fußzeile nur einmal zu verwenden.

Hinweis: ist neu in HTML5 und nicht kompatibel mit IE8 und niedrigeren

IE-Browsern , also verwenden Sie es mit Vorsicht.

2. HTML5-Fußzeilen-Nutzungslayout – TOP Beherrschen Sie das Fußzeilen-Tag, indem Sie das traditionelle div-Tag-Layout und das Fußzeilen-Tag-Layout vergleichen und beobachten. Fügen Sie gleichzeitig der Fußzeile Klasse hinzu und legen Sie die rote Schriftart zum Vergleich fest.

1. Vollständiger HTML5-Layout-Beispielcode

Das Obige verwendet das traditionelle HTML-Div-Tag und das HTML5-Fußzeilen-Tag-Layout und legt außerdem eine Klasse für die Fußzeile fest.

2. HTML5-Layout-Browser-Screenshot

footer 在线演示 DIVCSS5 body{text-align:center} /* 传统布局CSS */ #footer{color:#CCC; background:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%} /* HTML5布局样式 直接对footer元素设置样式 */ footer{ background:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%} .color-F00{ color:#F00} 传统html 使用div布局

Zum Testen erforderlich Für den Layouteffekt des HTML5-Fußzeilen-Tags müssen Sie den IE-Browser testen, der HTML5 unterstützt. Es wird empfohlen, den Test mit dem Browser Google Chrome oder dem Browser Win IE9 oder höher durchzuführen.

HTML5 -Tag-Element, HTML-Tutorial zum CSS-Layout der unteren Fußzeile

HTML5
-Tag-Element, HTML-Tutorial zum CSS-Layout der unteren Fußzeile