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> <h1>网站标题</h1> </header><br><br><br><br><br><br><br> <div>测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!</div> </body> </html>
说明:
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> 文档尾部内容 </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条边。
【:html教程、web前端】
以上就是html5怎么让头和尾固定不动的详细内容