本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
html5让头和尾固定不动的方法：
1、让头部固定不动
使用header标签定义头部，并添加“position:fixed;top: 0;”样式让其固定不动
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>
登录后复制
2、让尾部固定不动
使用footer标签定义尾部内容，并添加“position:fixed;bottom: 0;”样式让其固定不动
复制代码1
2
3
4
5
6
7
8
9
10
11
footer{
width: 100%;
height: 100px;
background-color: paleturquoise;
position: fixed;
bottom: 0;
}
<footer>
文档尾部内容
</footer>
登录后复制
扩展知识：固定定位：
当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。
fixed固定定位和absolute绝对定位比较类似，它们都能够让元素产生位移，并且脱离文档流。
复制代码1
2
3
4
5
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怎么让头和尾固定不动的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是追寻樱桃最近收集整理的关于html5怎么让头和尾固定不动的全部内容，更多相关html5怎么让头和尾固定不动内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复