老师,中间部分图片与图片之间有空白,怎样解决.谢谢!

老师,中间部分图片与图片之间有空白,怎样解决.谢谢!

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    body,ul{margin:0;padding:0;list-style:none;}

    .header{width:100%;height:100px;

      background-color:black;

        margin:0 auto;

        line-height:100px;

        position:fixed;

        top:0;

    }

    img{float:left;

    }

    .nav{float:left;

    margin-left:420px;

    }

    .nav li{margin-left:60px;

    display:inline-block;

    }

    .nav li a{text-decoration:none;

        color:white;

    }

    .main1{width:100%;height:550px;

          background-image: url(http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg);

          background-repeat:no-repeat;

          background-size:100%;

    }

    .main2{width:100%;height:550px;

          background-image: url(http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg);

          background-repeat:no-repeat;

          background-size:100%;

          }

     .main3{width:100%;height:550px;

          background-image: url(http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg);

          background-repeat:no-repeat;

          background-size:100%;          

    }

    

    .footer

            {width:100%;height:100px;

            background-color:black;

            line-height:100px;

            position:fixed;

            bottom:0;

            text-align:center;

    }

    .footer ul{overflow:hidden;}

    .footer li{float:left;

              margin-left:120px;

    }

    .footer li a{text-decoration: none;

                color:white;

    }

  </style>

</head>

<body>

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

  <div class="header">

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

      </a>

      <div class="nav">

      <ul>

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

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

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

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

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

      </ul>

      </div>

  </div>

  <div class="main1"></div>  

  <div class="main2"></div>

  <div class="main3"></div>

  <div class="footer">

    <ul>

      <li><a href="#"><span>网站导航</span></a></li>

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

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

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

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

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

    </ul>

  </div>

</body>

</html>



正在回答

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

2回答

同学,你好。background-size有两个值,第一个值代表背景图片的宽度,第二个值代表背景图片的高度,同学,这里只写了一个值100%,只是让宽度100%并没有让高度100%,因此需要设置background-size:100% 100%,  这个样式和background-size:cover样式是等效的。

两种方式都是可以的。

祝学习愉快!

Steve007 2019-03-26 17:36:31

同学,你好。

图片与图片之间有空白,是因为图片有默认的间距,只要给它们的父元素设置font-size:0样式就可以

清除掉默认的间隙了,如图:

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

祝学习愉快!

  • 提问者 独秀烟沙 #1
    老师,我设置以后,还是解决不了中间的空白,为什么?
    2019-03-26 17:41:26
  • 提问者 独秀烟沙 #2
    font-size不是设置字体大小的吗???
    2019-03-26 17:43:27
  • Steve007 回复 提问者 独秀烟沙 #3
    同学,你好。可能是由于电脑显示器的原因。同学可以将background-size:100%修改为background-size:cover,查看效果。 祝学习愉快!
    2019-03-26 18:59:25
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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