首頁 > 文章 > web前端 > HTML5

HTML5
標籤元素 html底部footer css佈局教學

巴扎黑原創: 2017-06-27 09:50:123554瀏覽

HTML5

記得我們在以前html5版本以前佈局網頁底部版權時，習慣使用id=”footer”或class=”footer”。了解更多html教學標籤！

例如傳統html版面程式碼：

#但在html5中將此」footer」常用的命名新增為html5元素標籤成員。

一、html5語法結構 - TOP

1、文法

2、對footer元素標籤加id

3、對footer標籤加class

< ;footer class=”yanshi”> 　　© DIVCSS5.COM 版權所有
　　學習CSS，找DIV+CSS資源上DIVCSS5!#

我們在html5開發使用footer標籤時，把當作普通div標籤對待即可，只不過一般用於網站底部佈局。一般情況下一篇網頁只有一個底部區，所以使用最好只使用一次footer即可。

要注意：

是html5新增的，在IE8及以下

IE瀏覽器
不相容，謹慎使用。

二、html5 footer使用佈局案例 - TOP#透過傳統div標籤佈局與footer標籤佈局比較觀察學習，從而掌握footer標籤。同時對footer加class，並設定紅色字體進行比較。

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 footer標籤佈局，同時也為footer設定class。

2、HTML5佈局瀏覽器截圖

HTML程式碼html5 footer佈局與瀏覽器瀏覽效果拼接圖

HTML5 <footer>標籤元素 html底部footer css佈局教學

要測試html5 footer標籤佈局效果，需要支援HTML5的IE瀏覽器測試。推薦Google chrome瀏覽器、或win IE9以上瀏覽器測試。

以上是HTML5

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Html中標籤的使用下一篇：Html中標籤的使用

看更多

HTML5 標籤元素 html底部footer css佈局教學

相關文章

HTML5
標籤元素 html底部footer css佈局教學