别小瞧HTML5中的footer标签它可是用来规定页面底部信息的，比如作者名、创建时间、联系方式之类的。这篇文章我们就来学学如何运用这个特色标签，看看里面有哪些实用属性，最后再来掌握如何巧妙地添加在页面底端。
HTML5中footer标签定义和用法
HTML5的footer标签可帮你轻松搞定网页或文章底部分区，像作者信息啊写稿日期之类的都可以放这儿，要是你想和我闲聊也是没问题哒～用上它后，网页布局更加直观明了，看着舒心，维护也便捷不少。一个网页里能容纳多个footer元素，根据需要自由布局就行咯!
我们来聊聊HTML5，它比以前的老版好了很多！比如那个“footer”标签，现在变得更给力了，语法也更易懂。你知道路牌上写着的那种联系人信息吗？就可以放在那个”address”标签里面，明白了吗？
HTML中footer的标准属性
HTML5里头的footer标签可添加好多属性，像是 class 和 contenteditable，甚至还有 contextmenu 等。这样一来，footer就不只是单纯显示信息的地方，还能变得好玩有趣儿，充满互动性！别看它们名字挺复杂的，实际上超容易理解，理解之后怎么使唤都行。捏（^ w ^）~
对footer元素标签加id
要把footer元素弄清楚，得叫它id。这么一来，CSS也好JavaScript也好，就能管好和调整这个footer的大小和动作了。这会使咱们的程序代码更容易掌握，还能随时添东西！
对footer标签加class
还记得ID吗？其实你还可以用CLASS给footer标签加个样式~这就好比给所有长得差不多的footer穿同款衣服，这样代码用着爽多了，管理起来也轻松哈。
知识扩展
不必纠结，其实HTML5里的footer标签只是个普通Div而已，拿来撑底座就可以了。网站底部大概就那一小块地儿，一个元素足矣了不过，别忘了这货在老版本的IE浏览器上可能有点不兼容啥的，你们看着办呗！
<footer> PHP中文网<br /> 学习CSS，找DIV+CSS资源上PHP中文网! </footer>
想要让网页底部的footer一直老老实实地待在下边，就算页面内容没填满也没事儿的话，首先得保证父层的高度得有个100%，接着把 footer跟他的上头搞对齐就行了~最后，确保用bottom:0这样的代码把 footer稳稳地挂在下面别忘了提前给父层预订好留给 footer的地盘哟。
<footer id=”abc”> PHP中文网<br /> 学习CSS，找DIV+CSS资源上PHP中文网! </footer>
html
<footer class=”yanshi”> PHP中文网<br /> 学习CSS，找DIV+CSS资源上PHP中文网! </footer>
“`css
.parent {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom:0;
height: 50px;/*预留足够高度*/
碰到IE6浏览器有问题，我们就得特别对待网页，让它们能正常显示。
接下来咱们就聊聊HTML5中foot标签到底是啥！别忘了关注我们后面要讲的页头的新闻，这样一定会帮助你们更好地理解并用好这个标签的~
#wapper{
position: relative; /*重要！保证footer是相对于wapper位置绝对*/
height: auto; /* 保证页面能撑开浏览器高度时显示正常*/
min-height: 100% /* IE6不支持，IE6要单独配置*/
}
#footer{
position: absolute; bottombottom: 0; /* 关键 */
left:0; /* IE下一定要记得 */
height: 60px; /* footer的高度一定要是固定值*/
}
#main-content{
padding-bottom: 60px; /*重要！给footer预留的空间*/
}
。
评论0