您的位置：首页 > Web前端 > CSS

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

2017-10-11 14:49 971 查看
注意：下面这个地方的*{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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航