如果给div的子集设置poition:fixed。

如果给div的子集设置poition:fixed。

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{

    margin:0;

    padding:0;

    }

    .content{

    width:1000px;

    margin:0 auto;


    }

    .header{

    width:100%;

    height:100px;

    background:#000;

    /* position:fixed; */

    /* top:0px; */

    }

    .log{

    float:left;

    width:300px;

    height:100px;

    margin-left:30px;

    }

    .nav{

    float:right;

    list-style:none;

    padding-right:10px;

    margin-right:80px;

    }

    .nav li{

    float:left;

    padding:0 30px;

    }

    .nav li a{

    text-decoration:none;

    width:auto;

    height:100px;

    display:block;

    line-height:100px;

    color:#a0a0a0;

    }

    .nav li a:hover{

    color:#fff;

    }


    .footer{

    width:100%;

    height:100px;

    background:#000;

    text-align:center;

    /* position:fixed;

    bottom:0px; */


    }

    .footer1{

    list-style:none;

    overflow:hidden;

    display:inline-block;

    }

    .footer1 li{

    float:left;

    margin:0 20px;

    }

    .footer1 li a{

      text-decoration:none;

      width:auto;

      height:100px;

      display:block;

      line-height:100px;

      color:#a0a0a0;

    }

    .footer1 li a:hover{

    color:#fff;

    }

.main{

}

  </style>

</head>

<body>

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

  <div class="content">

  <div class="header">

  <div class="log"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="imooc"></a></div>

  <ul class="nav">

  <li><a href="#">课程</a></li>

  <li><a href="#">职业路径</a></li>

  <li><a href="#">实战</a></li>

  <li><a href="#">猿问</a></li>

  <li><a href="#">手记</a></li>

  </ul>

  </div>

  <div class="main">

  <div class="left"></div>

  <div class="right"></div>

  </div>

  <div class="footer">

  <ul class="footer1">

  <li><a href="#">网站首页</a></li>

  <li><a href="#">企业合作</a></li>

  <li><a href="#">人才招聘</a></li>

  <li><a href="#">联系我们</a></li>

  <li><a href="#">常见问题</a></li>

  <li><a href="#">友情链接</a></li>

  </ul>

  </div>

  </div>

</body>

</html>

如果给div的子集设置poition:fixed。再改变div的宽度时设置了poition的子集不受影响怎么办


正在回答 回答被采纳积分+1

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

2回答
好帮手慕慕子 2019-08-12 19:15:26

同学你哈, 老师上一次回答给出了修改方案哦, 调整content的宽度为百分百就可以了哦

http://img1.sycdn.imooc.com//climg/5d514a240001e95607220280.jpg

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

好帮手慕慕子 2019-08-12 19:05:33

同学你好, 因为设置固定定位的元素参照的浏览器窗口, 所有设置定位后设置宽度百分百是适应窗口的宽度哦

这个练习是需要实现全屏效果的, 建议: 可以调整content的宽度为百分百,实现全屏效果哦

http://img1.sycdn.imooc.com//climg/5d5147cb000193ce03850169.jpg

同学可以继续完成代码,如果在编写代码的过程中, 遇到什么不明白的, 可以继续提问, 我们会继续为你解答的。

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~


  • 提问者 粥小贤 #1
    如果想达到这样的效果该怎么做呢
    2019-08-12 19:08:27
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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