html footer写法,HTML5 <footer>标签元素 css3布局教程

HTML5 标签元素 新增html5底部footer元素标签，对html 5新增footer标签根底认识到了解footer css组织教程做到真正掌控与认识

记得我们在畴前html5版本夙昔机关网页底部版权时，风尚使用id=”footer”或class=”footer”。懂得更多html教程标签！

比喻保守html机关代码：

© CSS5.COM 版权全数

进修CSS，找DIV+CSS老本上CSS5!

但在html5中将此”footer”经常应用的命名新增为html5元素标签成员。

一、html5语法结构

1、语法

© CSS5.COM 版权一切

深造CSS，找DIV+CSS资本上CSS5!

2、对footer元素标签加id

© CSS5.COM 版权全体

学习CSS，找DIV+CSS老本上CSS5!

3、对footer标签加class

© CSS5.COM 版权悉数

学习CSS，找DIV+CSS利润上CSS5!

4、常识裁减

咱们在html5启迪运用footer标签时，把算作平凡div标签看待就可，只是一样平常用于网站底部构造。一般情况下一篇网页只要一个底部区，以是应用最佳只应用一次footer便可。

需要留心：是html5新增的，在IE8及下列IE阅读器不兼容，昌大运用。

二、html5 footer运用结构案例

通过保守div标签布局与footer标签组织比照察看进修，从而把握footer标签。同时对footer加class，配置红色字体发展对照。

1、残破HTML5布局实例代码

footer 在线演示 CSS5

body{text-align:center}

/* 激进机关CSS */

#footer{color:#CCC; bac公斤round:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%}

/* HTML5构造样式 直接对footer元素设置款式 */

footer{ bac公斤round:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%}

.color-F00{ color:#F00}

古板html 运用div构造

© CSS5.COM 版权全数

学习CSS，找DIV+CSS成本上CSS5!

html5 footer标签结构

© CSS5.COM 版权全数

深造CSS，找DIV+CSS资本上CSS5!

html5 footer标签组织配置class

© CSS5.COM 版权全数

进修CSS，找DIV+CSS资源上CSS5!

以上应用古板html div标签与html5 footer标签机关，同时也对footer设置class。

2、HTML5结构阅读器截图

HTML代码html5 footer机关与涉猎器浏览成绩拼接图

要测试html5 footer标签组织效果，需要赞成HTML5的IE涉猎器测试。举荐google chrome阅读器、或win IE9以上浏览器测试。