HTML5 <フッター> タグ要素 HTML ボトムフッター CSS レイアウトのチュートリアル-htmlチュートリアル-php.cn

HTML5 <フッター> タグ要素 HTML ボトムフッター CSS レイアウトのチュートリアル

巴扎黑

リリース： 2017-06-27 09:50:12

オリジナル

3570 人が閲覧しました

HTML5

例: 従来の

html レイアウト

しかし、html5では、この一般的に使用される名前の「フッター」がhtml5要素のタグメンバーとして追加されます。

html5 構文

1. 文法

2. フッター要素タグに ID を追加します

3. フッタータグにクラスを追加します

> ;

4. 知識の拡張

HTML5 開発でフッタータグを使用する場合、通常の div タグとして扱うことができますが、通常は Web サイトの下部レイアウトに使用されます。一般に、Web ページの下部領域は 1 つだけであるため、フッターは 1 回だけ使用するのが最善です。

注:

IE ブラウザ

とは互換性がないため、注意して使用してください。

2. HTML5 フッター使用レイアウトの事例 - TOP

フッタータグをマスターするために、従来の div タグレイアウトとフッタータグレイアウトを比較して観察します。同時にフッターにクラスを追加し、比較用に赤いフォントを設定します。

1. HTML5 レイアウトの完全なサンプルコード

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>footer 在线演示 DIVCSS5</title> 
  <style> 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}  </style> 
 </head> 
 <body> 
  <p>传统html 使用div布局</p> 
  <div id="footer">
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </div> 
  <p>html5 footer标签布局</p> 
  <footer>
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </footer> 
  <p>html5 footer标签布局设置class</p> 
  <footer class="color-F00">
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </footer>   
 </body>
</html>

ログイン後にコピー

上記では、従来の HTML div タグと html5 フッタータグのレイアウトを使用し、フッターのクラスも設定します。

2. HTML5 レイアウトのブラウザーのスクリーンショット

HTML コード html5 フッターレイアウトとブラウザーのブラウジング効果の接続図

HTML5 <フッター> タグ要素 HTML ボトムフッター CSS レイアウトのチュートリアル html5 フッタータグのレイアウト効果をテストするには、HTML5 をサポートする IE ブラウザーをテストする必要があります。 Google Chrome ブラウザまたは Win IE9 以降のブラウザでテストすることをお勧めします。