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} /* 傳統(tǒng)布局CSS */ #footer{color:#CCC; background:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%} /* HTML5布局樣式 直接對(duì)footer元素設(shè)置樣式 */ footer{ background:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%} .color-F00{ color:#F00} </style>
</head>
<body>
<p>傳統(tǒng)html 使用div布局</p>
<div id="footer">
© DIVCSS5.COM 版權(quán)所有
<br /> 學(xué)習(xí)CSS，找DIV+CSS資源上DIVCSS5!
</div>
<p>html5 footer標(biāo)簽布局</p>
<footer>
© DIVCSS5.COM 版權(quán)所有
<br /> 學(xué)習(xí)CSS，找DIV+CSS資源上DIVCSS5!
</footer>
<p>html5 footer標(biāo)簽布局設(shè)置class</p>
<footer class="color-F00">
© DIVCSS5.COM 版權(quán)所有
<br /> 學(xué)習(xí)CSS，找DIV+CSS資源上DIVCSS5!
</footer>
</body>
</html>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
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 tag element html bottom footer css layout tutorial. For more information, please follow other related articles on the PHP Chinese website!