为了账号安全,请及时绑定邮箱和手机立即绑定

CSS网页布局基础 2-6 编程练习 麻烦老师点评下,为什么头部设了sticky top=0 不能固定,而脚部可以

CSS网页布局基础 2-6 编程练习 麻烦老师点评下,为什么头部设了sticky top=0 不能固定,而脚部可以

嘎子012 2017-11-05 14:53:49
<!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 回答

?
慕spring

TA贡献38条经验 获得超4个赞

.header的样式里{ top:0; }用的是中文标点符号,改成英文的就好了

查看完整回答
反对 回复 2017-11-06
  • 1 回答
  • 0 关注
  • 1108 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信