© DIVCSS5.COM 無断複写・転載を禁じます
© DIVCSS5.COM 無断複写・転載を禁じます

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 <フッター> タグ要素 HTML ボトムフッター CSS レイアウトのチュートリアル

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

巴扎黑
巴扎黑オリジナル
2017-06-27 09:50:123546ブラウズ

HTML5

タグ要素は、html5 の下部フッター要素タグを追加します。HTML 5 の新しいフッター タグの基本を理解し、フッター CSS レイアウト チュートリアルを理解して、
を完全にマスターして理解してください。以前の html5 バージョンでは Web ページの下部に著作権をレイアウトする場合、id="footer" または class="footer" を使用するのが一般的です。 HTML チュートリアルのタグについて詳しく学習してください。

例: 従来の

html レイアウト

© DIVCSS5.COM All Rights Reserved
CSS を学習するには、DIVCSS5 で DIV+CSS リソースを見つけてください。 /div>

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

1.

html5 構文

1. 文法

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

© DIVCSS5.COM All Rights Reserved
CSS を学習するには、DIVCSS5 で DIV+CSS リソースを見つけてください。 /footer> ;

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

CSS を学習するには、DIVCSS5 の DIV+CSS リソースを見つけてください。
> ;

4. 知識の拡張

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


注:

は HTML5 の新機能であり、IE8 以下の

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 以降のブラウザでテストすることをお勧めします。

以上がHTML5 <フッター> タグ要素 HTML ボトムフッター CSS レイアウトのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。