2-6编程练习,为什么只要窗口大小改变,滚动条左右移动也看不见被覆盖的页头和页脚?

2-6编程练习,为什么只要窗口大小改变,滚动条左右移动也看不见被覆盖的页头和页脚?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{

    padding: 0;

    margin: 0;

    }


    .header{

          width:1350px; 

          height:100px;

          background: black;

             position: fixed;

    }


    img{cursor: pointer;}


    .list{

    float: right;

    color: white;

    font-family: "微软雅黑";

    font-size:25px;

    margin-left:50px;

      line-height: 100px;

    cursor: pointer;

    }


    .container{

      padding-top: 100px;

      padding-bottom: 50px;

    }


    .footer{

      width: 1350px;

      height:60px;

      background-color: black;

      position: fixed;

      bottom:0;

    }

   

    .footnav{

      width: 50%;

      height:60px;

      margin: 0 auto;

      line-height: 60px;

    }


    span{

      margin-right: 45px;

      color:white;

      line-height: 60px;

    }


  </style>

</head>

<body>

  <!-- 此处写代码 -->

  <div class="header">

 

  <span><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></span><span class="list">手记</span><span class="list">猿问</span><span class="list">实战</span><span class="list">职业路径</span><span class="list">课程</span>


  </div>

    

  <div class="container">


      <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">

      <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">

      <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">


  </div>  


  <div class="footer">

      <div class="footnav">

        <span>网站首页</span><span>企业合作</span><span>人才招聘</span><span>联系我们</span><span>常见问题</span><span>友情链接</span>

      </div>

  </div>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

设置有固定定位,所以它不会移动;

另外给头部和底部的宽度设置为100%,主体部分的图片宽度也设置为100%。

因为你的页面在我的显示器中是这样显示的,不同显示器分辨率不同,导致显示的效果会有所不同。
http://img1.sycdn.imooc.com//climg/5a1b87e000018c0519041059.jpg

祝学习愉快!

  • Atlas_Wu 提问者 #1
    非常感谢!
    2017-11-29 17:22:27
  • Atlas_Wu 提问者 #2
    http://img1.sycdn.imooc.com//climg/5a1e7e3e00011fdf07550581.jpg宽度设置百分百后,如果窗口缩小文字就会这样乱,没有按比例缩小呢。。。这怎么办呢?
    2017-11-29 17:32:37
怎么都被占用了呢 2017-11-29 19:09:38

随着窗口缩小,布局相应变化,这是响应式的效果,后面的进阶课程中会有这种效果的讲解的。祝学习愉快!

  • 提问者 Atlas_Wu #1
    好的,谢谢老师!
    2017-11-30 19:07:00
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师