html5如何让头和尾固定不动
html5如何让头和尾固定不动
这篇文章主要讲解了“html5如何让头和尾固定不动”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html5如何让头和尾固定不动”吧！
固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
html5让头和尾固定不动的方法：
1、让头部固定不动
使用header标签定义头部，并添加“position:fixed;top: 0;”样式让其固定不动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body{ height: 1500px; } header { width: 100%; background-color: #FFC0CB; position: fixed; top: 0; } </style> </head> <body> <header> <h2>网站标题</h2> </header><br><br><br><br><br><br><br> <div>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div> </body> </html>
说明：
header：标签定义“网页”或“section”的页眉。
通常包含h2-h7元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。
2、让尾部固定不动
使用footer标签定义尾部内容，并添加“position:fixed;bottom: 0;”样式让其固定不动
footer{ width: 100%; height: 100px; background-color: paleturquoise; position: fixed; bottom: 0; } <footer> 文档尾部内容 </footer>
说明：
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条边。
感谢各位的阅读，以上就是“html5如何让头和尾固定不动”的内容了，经过本文的学习后，相信大家对html5如何让头和尾固定不动这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是高防服务器网，小编将为大家推送更多相关知识点的文章，欢迎关注！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[