HTML5 【footer】标签元素 css3布局教程

html教程-H5

访问网址

设计展示

Design display

HTML5 【footer】标签元素 css3布局教程

HTML5

标签元素 新增html5底部footer元素标签,对html 5新增footer标签基础认识到了解footer css布局教程做到真正掌握与认识

记得我们在以前html5版本以前布局网页底部版权时,习惯使用id=”footer”或class=”footer”。了解更多html教程标签!

比如传统html布局代码:

  © yuegekeji.COM 版权所有   学习CSS,找DIV+CSS资源上yuegekeji!

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

一、html5语法结构

1、语法

  © yuegekeji.COM 版权所有   学习CSS,找DIV+CSS资源上yuegekeji!

2、对footer元素标签加id

  © yuegekeji.COM 版权所有   学习CSS,找DIV+CSS资源上yuegekeji!

3、对footer标签加class

  © yuegekeji.COM 版权所有   学习CSS,找DIV+CSS资源上yuegekeji!

4、知识扩展
我们在html5开发使用footer标签时,把当作普通div标签对待即可,只不过一般用于网站底部布局。一般情况下一篇网页只有一个底部区,所以使用最好只使用一次footer即可。

需要注意:

是html5新增的,在IE8及以下IE浏览器不兼容,谨慎使用。

二、html5 footer使用布局案例

通过传统div标签布局与footer标签布局对比观察学习,从而掌握footer标签。同时对footer加class,设置红色字体进行对比。

1、完整HTML5布局实例代码

 
 
 
 

传统html 使用div布局

html5 footer标签布局

  © yuegekeji.COM 版权所有   学习CSS,找DIV+CSS资源上yuegekeji!

html5 footer标签布局设置class

  © yuegekeji.COM 版权所有   学习CSS,找DIV+CSS资源上yuegekeji!

以上使用传统html div标签和html5 footer标签布局,同时也对footer设置class。

要测试html5 footer标签布局效果,需要支持HTML5的IE浏览器测试。推荐谷歌 chrome浏览器、或win IE9以上浏览器测试。


作者:@悦阁网络科技 

悦阁网络科技有限公司专业为中小企业提供精致的佛山网站建设佛山网站设计佛山网站制作及相关网络营销等服务,是广佛地区最好的网络科技公司之一,在广佛做网站开发就找悦阁网络科技!

您对建网站有需求?请回到首页“悦阁网络”官网  查找您想建哪种类型的网站,然后联系我们客服QQ,我们将竭诚为您服务!


联系我们

Contact Us

*请认真填写需求信息,我们会在24小时内与您联系