2-6练习,请问老师这么实现有什么需要改进的地方吗

2-6练习,请问老师这么实现有什么需要改进的地方吗


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{margin:0;padding:0;}

    body{background: black;}

    .nav{

        /*width:100%;*/

        /*max-width:1100px;*/

        /*min-width: 1100px;*/

        width: 1100px;

        height:100px;

        background:black;

        margin:0 auto;

        position: fixed;

        top: 0;

        left: 50%;

        margin-left: -550px;

        z-index: 10;

        

    }

    .logo{

        width:auto;

        height:100px;

        cursor:pointer;

        /*position: absolute;*/

        /*left: 0;*/

    }

    

    .nav-word{

        height: auto;

        width: auto;

        float: right;


    }

    .word{

        color:white;

        font: bold 22px/100px "宋体";

        margin: 30px;

        display: inline;

        cursor:pointer;   

    }


    .contentergroup{

      position: relative;

      font-size: 0;

      text-align: center;

      top:100px;


    }

    .content{

      width:1100px;

      height: auto;


    }

    .white{

      width:1100px;

      height: 100px;


    }

    

    .footer{

      position: fixed;

      width:1100px; 

      height: 100px;

      background: black;

      margin: 0 auto;

      text-align: center;

      bottom: 0;

      left: 50%;

      margin-left: -550px;

      z-index: 10;

    }


    .footword{

        color:white;

        font:16px/100px "宋体";

        margin: 30px;

        display: inline;

        cursor:pointer;   

    }

    

  </style>

</head>

<body>

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

  <div class="nav">

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

        <div class="nav-word">

          <div class="word">课程</div>

          <div class="word">职业路径</div>

          <div class="word">实战</div>

          <div class="word">猿问</div>

          <div class="word">手记</div>

        </div>

  </div>


  <div class="contentergroup">   

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

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

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

      <div class="white"></div>

  </div>

   

  <div class="footer">

    <div class="footword">网站首页</div>

    <div class="footword">企业合作</div>

    <div class="footword">人才招聘</div>

    <div class="footword">联系我们</div>

    <div class="footword">常见问题</div>

    <div class="footword">友情链接</div>

  </div>


</body>

</html>


正在回答

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

2回答

你好,可以的哦,可以使用最小宽度的问题来解决,不过由于顶部设置了固定定位,所以最小宽度不能对其生效,建议:这里可以通过进阶级课程的响应式布局来设置,或者不设置固定定位。而且只要不缩小的特别小的时候,这个应该是不会影响的,造成这样的原因是由于,固定定位脱离文档流,导致最小宽度不生效。

祝学习愉快~

好帮手慕糖 2017-12-01 14:40:52

你好,效果是实现了,但是还有一点,这里整体要实现宽度100%哦,这里可以调整下。

祝学习愉快~

  • 老师。我改了各个元素的宽度是100%,但是有两个问题,第一是当浏览器宽度小到一定程度的时候,导航栏的文字会跑到第二行去,这是什么原因造成的,怎么解决这种问题呢; 第二个问题,也是浏览器宽度小到一定程度的时候,图片会缩的很小(设置了一下min-width,发现大概可以避免图片缩的太小的问题,这么解决可以嘛)
    2017-12-01 16:47:30
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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