<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.par{
width: 1100px;
height: 100px;
margin: 0 auto;
}
.header{
background: black;
border: 1px solid #ccc;
position: sticky;
top:0;
}
.logo{
z-index: -1;
}
.nav{
float: right;
margin-top: -100px;
min-height: 100%;
}
.li{
float: left;
line-height: 90px;
text-align: center;
margin-right: 20px;
color: #FFF;
}
.con img{
width: 100%;
height: 100%;
max-width: 100%;
}
.foot{
width: 100%;
height: 80px;
background: black;
position: sticky;
bottom:0px;
}
.foot-li{
float: left;
line-height: 70px;
text-align: center;
margin-right: 20px;
color: #FFF;
}
.foot-nav{
left: 350px;
position: relative;
}
</style>
</head>
<body>
<div>
<!-- 头部内容 -->
<div>
<div>
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="图片挂了">
</div>
<div>
<div>课程</div>
<div>职业路径</div>
<div>实战</div>
<div>猿问</div>
<div>手机</div>
</div>
</div>
<!-- 中间内容 -->
<div>
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt="">
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt="">
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt="">
</div>
<!-- 脚部内容 -->
<div>
<div>
<div>企业合作</div>
<div>人才招聘</div>
<div>联系我们</div>
<div>讲师招聘</div>
<div>常见问题</div>
</div>
</div>
</div>
</body>
</html>麻烦老师点评下,为什么头部设了sticky top=0 不能固定,而脚部可以
- 1 回答
- 0 关注
- 1108 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消