使用css实现页面头部固定，下面随着内容的增多滚动，但是头部不动的效果

最新推荐文章于 2023-06-16 20:03:52 发布

Smile_Monica

最新推荐文章于 2023-06-16 20:03:52 发布

阅读量3.6w

点赞数 6

分类专栏： css

本文链接：https://blog.csdn.net/smile_monica/article/details/78203591

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

注意：下面这个地方的*{margin:0; padding:0}不要删掉，会影响页面整体显示样式

<!DOCTYPE html>
<html>
<head>
	<title>固定头部文件</title>
	<style type="text/css">
		*{margin:0; padding:0}
		body{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#747d67; background:#fff}
		a{color:#528036; text-decoration:none}
		a:hover{color:#000; text-decoration:none}
		ul{list-style:none}
		h1{font-size:16px}
		.clear{clear:both}
		.top-head{
			position:fixed; width:100%;height:auto; background:#ffc; overflow-y:auto;min-height: 60px;line-height: 60px;
		}
		.container{
			padding-top: 60px;
		}
	</style>
</head>
<body>
<!-- 头部 -->
<div class="top-head">
	我是头部文件的显示的内容，随着下边文件内容的增多，我是不会变得，我就固定在这个位置了
</div>
<div class="container">
    <ul>
       <li><a href="#">1啦啦啦啦啦</a></li>
       <li><a href="#">2啦啦啦啦啦</a></li>
       <li><a href="#">3啦啦啦啦啦</a></li>
       <li><a href="#">4啦啦啦啦啦</a></li>
       <li><a href="#">5啦啦啦啦啦</a></li>
       <li><a href="#">6啦啦啦啦啦</a></li>
       <li><a href="#">7啦啦啦啦啦</a></li>
       <li><a href="#">8啦啦啦啦啦</a></li>
    </ul>
</div>
</body>
</html>

Smile_Monica

关注

6
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
使用css实现页面头部固定，下面随着内容的增多滚动，但是头部不动的效果

注意：下面代码的公共样式*{margin:0; padding:0}部分不要去掉：固定头部文件 *{margin:0; padding:0} body{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#747d67; background:#fff} a{color:#528036; text-
复制链接

扫一扫