HTML5 <footer> tag element html bottom footer css layout tutorial-HTML Tutorial-php.cn

HTML5

巴扎黑

Release： 2017-06-27 09:50:12

Original

3602 people have browsed it

HTML5

Remember When we laid out the copyright at the bottom of the web page before the previous HTML5 version, we were accustomed to using id="footer" or class="footer". Learn more about html tutorial tags!

For example, traditionalhtml layoutCode:

But in html5, this commonly used name of "footer" is added as an html5 element tag member.

1. html5 Grammar Structure - TOP

1、Grammar

2. Add id to the footer element tag

3. Add class

< to the footer tag ;footer class=”yanshi”> © DIVCSS5.COM All Rights Reserved
To learn CSS, find DIV+CSS resources on DIVCSS5!

4. Knowledge expansion
When we use the footer tag in HTML5 development, we can treat it as an ordinary div tag, but it is generally used for the bottom layout of the website. Generally, a web page has only one bottom area, so it is best to use the footer only once.

Note:

2. HTML5 footer usage layout case - TOP

Master the footer tag by comparing and observing the traditional div tag layout and the footer tag layout. At the same time, add class to the footer and set the red font for comparison.

1. Complete HTML5 layout example code

<!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>

Copy after login

The above uses the traditional html div tag and html5 footer tag layout, and also sets the class for the footer.

2. HTML5 layout browser screenshot

HTML5 <footer> tag element html bottom footer css layout tutorial

HTML code html5 footer layout and browser browsing effect splicing diagram

To be To test the layout effect of the html5 footer tag, you need to test the IE browser that supports HTML5. It is recommended to test with Google Chrome browser or Win IE9 or above browser.

The above is the detailed content of HTML5

HTML5 tag element html bottom footer css layout tutorial

HTML5
tag element html bottom footer css layout tutorial