文档的页脚:
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <footer> 标签。
注释:IE 8 或更早版本的 IE 浏览器不支持 <footer> 标签。
标签定义及使用说明
<footer> 标签定义文档或者文档的一部分区域的页脚。
<footer> 元素应该包含它所包含的元素的信息。
在典型情况下,该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
在一个文档中,您可以定义多个 <footer> 元素。
html footer 始终靠底部
html footer置于页面最底部的方法实例代码如下:
footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:0),父层内要预留footer的高度。
<!-- 父层 -->
<div id="wapper">
<!-- 主要内容 -->
<div id="main-content">
</div>
<!-- 页脚 -->
<div id="footer">
</div>
</div>
CSS如下:
#wapper{
position: relative; /*重要!保证footer是相对于wapper位置绝对*/
height: auto; /* 保证页面能撑开浏览器高度时显示正常*/
min-height: 100% /* IE6不支持,IE6要单独配置*/
}
#footer{
position: absolute; bottom: 0; /* 关键 */
left:0; /* IE下一定要记得 */
height: 60px; /* footer的高度一定要是固定值*/
}
#main-content{
padding-bottom: 60px; /*重要!给footer预留的空间*/
}
html footer footer实现在底部+居中的方法
1、水平居中可以使用width: 100%和text-align: center;
2、垂直居中并实现动态变化可以使用onresize事件+js动态设置布局(position: absolute; 以及top/bottom)来实现;
3、 图片在div中居中设置:使用margin: 0px auto;
4、怎么保证左右拉伸时图片和输入框的绝对居中效果不变,设置最小宽度min-width的值一致即可. 其他使用了display: inline-block的元素同理;
HTML 4.01 与 HTML5之间的差异
<footer> 标签是 HTML 5 中的新标签。
提示:假如您使用 <footer> 元素来插入联系信息,应该在 <footer> 元素内使用 <address> 标签。
<footer> 标签支持 HTML 的全局属性。
事件属性
<footer> 标签支持 HTML 的事件属性。