这篇文章主要讲解了“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如何让头和尾固定不动这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。