欢迎进入悦阁网络,做靠谱的公司,做靠谱的网站! 【登录】 【注册】 【新版官方网站】 全国7*24热线电话: 0757-89375359 18824129793、 020-89375359
悦阁观点
建站沙漠风云
网站售后文档
SEO推广教程
百度竞价教程
html教程-H5
div css教程
悦阁软著证书
网站建设知识
微信营销知识
微信营销技巧
投诉建议
投诉中心受理方式:
电话:13928792327
邮箱:hefc@yuegekeji.cn
HTML5 【footer】标签元素 css3布局教程

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,我们将竭诚为您服务!


Copyright © 2011 All rights reserved 佛山市悦阁网络科技有限公司版权所有 粤ICP备14100185号 技术支持:悦阁科技 佛山网站建设 | 在线助手高新企业证书编号:GR201744001793

× 悦阁网络科技有限公司-在线助手

你好!
悦阁网络科技有限公司在线助手,请输入你要想知道的问题关键字