社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > HTML5
標籤元素 html底部footer css佈局教學

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

巴扎黑
發布： 2017-06-27 09:50:12
原創
3603 人瀏覽過

HTML5

標籤元素新增html5底部footer元素標籤，對html 5新增footer標籤基礎認識到了解footer css佈局教程做到真正掌握與認識

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

例如傳統html版面程式碼：

 　　© DIVCSS5.COM 版權所有
 　　學習學習CSS，找DIV+CSS資源上DIVCSS5! 
 

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

一、html5語法結構  -   TOP

1、文法

 　　© DIVCSS5.COM 版權所有
學習CSS，找DIV+CSS資源上DIVCSS5! 
 

2、對footer元素標籤加id

##
 　© DIVCSS5.COM 版權所有
 　　學習CSS，找DIV+CSS資源上DIVCSS5! 
 


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

標籤元素 html底部footer css佈局教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css h5 html html5 元素 標籤
來源：php.cn
上一篇：Html中標籤的使用 下一篇：div footer標籤css實作位於頁面底部固定
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2324
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2459
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
2074
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1959
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
2029
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板