请问老师,2-6的底部无法固定是什么原因呢?还有我的代码有没有可以优化的地方呢?

请问老师,2-6的底部无法固定是什么原因呢?还有我的代码有没有可以优化的地方呢?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{

        padding:0;

        margin:0;

        color:#fff;

    }

    .nav{

        background:#000;

        width:100%;

        height:100px;

       position:fixed;

    }

    .nav-ul{

        float:right;

        list-style-type:none;

        height:100px;

        line-height:100px;

        margin-right:50px;

       

    }

    .nav-li{

        float:left;

        margin-left: 30px;

        padding-right:5px;

        font-size:18px;

        font-weight:bold;

    }

    .container{width:100%;padding-top:100px;}

    .footer{

        background:#000;

        width:100%;

        height:100px;

        position:fixed;

    }

    .foot-ul{

        width:600px;

        height:100px;

        list-style-type:none;

        margin:0 auto;

        line-height:100px;

    }

    .foot-li{

        float:left;

        padding-left:30px;

    }

    

  </style>

</head>

<body>

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

  <div class="nav">

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

    <ul class="nav-ul">

        <li class="nav-li">课程</li>

        <li class="nav-li">职业路径</li>

        <li class="nav-li">实战</li>

        <li class="nav-li">猿问</li>

        <li class="nav-li">手记</li>

    </ul>

  </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">

     <ul class="foot-ul">

          <li class="foot-li">网站首页</li>

          <li class="foot-li">企业合作</li>

          <li class="foot-li">人才招聘</li>

          <li class="foot-li">联系我们</li>

          <li class="foot-li">常见问题</li>

          <li class="foot-li">友情链接</li>

     </ul>

  </div>

</body>

</html>


正在回答

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

4回答

height:100px;这行代码的分号是中文状态下的,给它再设置一个bottom:0;

另外给图片设置一个width为100%;

别的没有问题!

祝学习愉快!

  • Snikt 提问者 #1
    谢谢老师,为什么设置了bottom:0;才会生效呢?
    2017-07-13 17:54:51
qq_天天_66 2017-07-14 11:57:58

兄弟,有两个地方要完善一下。

文字和引用图片要添加超链

container里的第一张图,你为了防止被头部遮盖,你用了padding-top,但是同样你还要考虑第三张图被底部的页脚遮盖哦

个人看法

  • 提问者 Snikt #1
    好 十分感谢~
    2017-07-14 14:55:08
一路电光带火花 2017-07-14 09:34:18

原因很简单呀,顶部已经是最上面了,不会有元素去遮挡它,所以只要固定它就会在那,foot位于页面最底部,它前面有可能会有很多元素,所以需要通过bottom的设置它才能固定在那个位置啊!!

  • 提问者 Snikt #1
    好 谢谢啊
    2017-07-14 14:54:36
小丸子爱吃菜 2017-07-13 18:13:59

没有bottom:0,它就会固定在页面的最底部,你是看不到的,配合这个属性才能看到,才能让它固定在页面的可视区域的最底部。

  • 提问者 Snikt #1
    那为什么顶部的导航栏不用设置top:0;也能固定在可视区域的最顶部呢?
    2017-07-14 09:24:34
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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