体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

2-7请检查练习作业是否正确

来源：2-7 编程练习

weixin_慕工程1249934

2020-08-07 18:59:41

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{padding:0;margin:0;}

    .con{width:100%;height:100px;background-color:black;

        position:fixed;

    }

     .logo{float:left;}

     .nav ul{float:right;

        list-style:none;

        }

      .nav ul li{display:inline;

          color:white;

          margin-right:20px;

          line-height:100px;

      }

      a{text-decoration:none;

          color:white;

      }

      .footer-2{

          background-color:black;

          height:100px;

          width:100%;

          color:white;

          text-align:center;

          line-height:100px;

          /*position:sticky;*/

          /*bottom:0;*/

          position:fixed;

          bottom:0;

      }

      .footer-2 ul li{display:inline;

          margin:0 20px;

          cursor:pointer;

      }

     

     

    .header{background:url(http://climg.mukewang.com/58c0eda50001e12416000480.jpg) no-repeat;width:100%;height:480px;}

    .container{background:url(http://climg.mukewang.com/58c0edb80001c9f216000480.jpg) top center no-repeat;width:100%;height:480px;}

    .footer{background:url(http://climg.mukewang.com/58c0edc9000100d516000480.jpg) no-repeat;width:100%;height:480px;}

  </style>

</head>

<body>

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

  <div>

     <div class="con"> 

         <div class="logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>

         </div>

         <div class="nav">

          <ul >

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

  </div>

  <div class="header"></div>

  <div class="container"></div>

  <div class="footer"></div>

  <div class="footer-2">

      <ul>

          <li>网站首页 </li>

          <li>企业合作 </li>

          <li>人才招聘 </li>

          <li>联系我们 </li>

          <li>常见问题 </li>

          <li>友情链接 </li>

      </ul>

  </div>

  

 

</body>

</html>


写回答

3回答

好帮手慕码

2020-08-10

同学你好，这边测试高度没有空隙，如下：

http://img.mukewang.com/climg/5f30acb0093693de00000000.jpg

请问同学是否缩小了页面呢？需要设置为100%查看页面哦：

http://img.mukewang.com/climg/5f30accc090ad06b02700064.jpg

祝学习愉快~

0

weixin_慕工程1249934

提问者

2020-08-10

按照你的意见修改后，特别是加上background-size:100%，高度有空隙，麻烦帮忙看是哪有问题

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{padding:0;margin:0;}

    .con{width:100%;height:100px;background-color:black;

        position:fixed;

        top:0;

    }

     .logo{float:left;}

     .logo img{display:block;}

     .nav ul{float:right;

        list-style:none;

        }

      .nav ul li{display:inline;

          color:white;

          margin-right:20px;

          line-height:100px;

      }

      a{text-decoration:none;

          color:white;

      }

      .footer-2{

          background-color:black;

          height:100px;

          width:100%;

          color:white;

          text-align:center;

          line-height:100px;

          /*position:sticky;*/

          /*bottom:0;*/

          position:fixed;

          bottom:0;

      }

      .footer-2 ul li{display:inline;

          margin:0 20px;

          cursor:pointer;

      }

     

     

    .header{background:url(http://climg.mukewang.com/58c0eda50001e12416000480.jpg) no-repeat;width:100%;height:480px;

        background-size:100%;

        margin-top:100px;

    }

    .container{background:url(http://climg.mukewang.com/58c0edb80001c9f216000480.jpg) top center no-repeat;width:100%;height:480px;

        background-size:100%;

    }

    .footer{background:url(http://climg.mukewang.com/58c0edc9000100d516000480.jpg) no-repeat;width:100%;height:480px;

        background-size:100%;

        margin-bottom:100px;

    }

  </style>

</head>

<body>

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

  <div>

     <div class="con"> 

         <div class="logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>

         </div>

         <div class="nav">

          <ul >

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

  </div>

  <div class="header"></div>

  <div class="container"></div>

  <div class="footer"></div>

  <div class="footer-2">

      <ul>

          <li>网站首页 </li>

          <li>企业合作 </li>

          <li>人才招聘 </li>

          <li>联系我们 </li>

          <li>常见问题 </li>

          <li>友情链接 </li>

      </ul>

  </div>

  

 

</body>

</html>


0

好帮手慕星星

2020-08-07

同学你好，代码问题如下：

1、logo高度超出了父元素

http://img.mukewang.com/climg/5f2d34540952a17703240153.jpg

这是因为图片为行内元素，有文字特性，默认存在间隙。建议将图片设置为block块

http://img.mukewang.com/climg/5f2d348a095d9e9c02230078.jpg

2、图片在水平方向上没有铺满

http://img.mukewang.com/climg/5f2d34ab09f66daa19050564.jpg

需要考虑分辨率问题，这里可以使用css3中的背景大小属性，目前课程中还没有讲解，后面会学习到

http://img.mukewang.com/climg/5f2d351709ed57e505800487.jpg

或者也可以使用img插入，设置宽度为100%解决。

3、上下设置固定定位，脱离文档流，导致遮住中间一部分，可以设置上下间距解决。参考

http://img.mukewang.com/climg/5f2d356509d0b5c603670192.jpg

http://img.mukewang.com/climg/5f2d357009ec81b004210183.jpg

http://img.mukewang.com/climg/5f2d3578098e014c03860172.jpg

自己再测试下，祝学习愉快！

0

0 学习 · 40143 问题

查看课程

相似问题

请老师检查是否正确

回答 1

请检查代码是否正确

回答 1

老师我想要一下,这几个编程练习的源码

回答 2

请老师帮忙检查下是否正确

回答 2

麻烦老师帮忙检查下2-7练习，这样写是否正确。

回答 1

打开慕课网App查看更多内容