固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。
html5让头和尾固定不动的方法:
1、让头部固定不动
使用header标签定义头部,并添加“position:fixed;top: 0;”样式让其固定不动
立即学习“前端免费学习笔记(深入)”;
网站标题
测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!

说明:
header:标签定义“网页”或“section”的页眉。
通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。
2、让尾部固定不动
使用footer标签定义尾部内容,并添加“position:fixed;bottom: 0;”样式让其固定不动
footer{
width: 100%;
height: 100px;
background-color: paleturquoise;
position: fixed;
bottom: 0;
}

说明:
footer标签:代表“网页”或“section”的页脚。
通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。
如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。
扩展知识:固定定位:
当元素的position属性设置为fixed时,这个元素就被固定了,被固定的元素不会随着滚动条的拖动而改变位置。在视野中,固定定位的元素的位置是不会改变的。
fixed固定定位和absolute绝对定位比较类似,它们都能够让元素产生位移,并且脱离文档流。
position:fixed; top:像素值; bottom;像素值; left:像素值; right:像素值;
“position:fixed;”是结合top、bottom、left和right这4个属性一起使用的,其中“position:fixed;”使得元素成为固定定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。
top、bottom、left和right这4个属性不一定全部都用到。注意,这4个值的参考对象是浏览器的4条边。











