三个图片之间有缝隙,怎么去除啊

三个图片之间有缝隙,怎么去除啊

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        padding: 0;
        margin: 0;
        color: #cfcfcf;
        font-family: "微软雅黑";
        list-style: none;
        font-size:20px;
        text-decoration: none;
        
    }
    .head{
        width: 100%;
        height: 100px;
        background: #000;
        margin: 0 auto;
        position: fixed;
        top: 0;
    }
    .logo{
        float: left;
    }
    .nav{
       
        width: 65%;
        height: 100px;
        line-height: 100px;
        float: right;
       text-align: center;
       
    }
    .nav ul li{
        display: inline;
        margin-left: 50px;
    }
     .container{
        width: 100%;
        height: 1060px;
        background: #fff;
        margin: 0 auto;
        margin-top: 100px;
    
    }
    .container a img{
        width: 100%;
        height: 300px;
    }
    .foot{
        width: 100%;
        height: 150px;
        line-height: 150px;
        background: #000;
        text-align: center;
        position: fixed;
        bottom: 0;
    }
    .foot ul li{
        display: inline;
        margin-left: 50px;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="head">
      <div class="logo">
         <a href="#"> <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" /></a>
      </div>
      <div class="nav">
          <ul>
              <a href="#"><li>课程</li></a>
              <a href="#"><li>职业路径</li></a>
              <a href="#"><li>实战</li></a>
              <a href="#"><li>猿问</li></a>
              <a href="#"><li>手记</li></a>
              </ul>
          </div>
  </div>
  <div class="container">
      <a href="#"> <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" /></a>
      <a href="#"> <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" /></a>
      <a href="#"> <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" /></a>
  </div>
  <div class="foot">
      <ul>
             <a href="#"><li>网站首页</li></a>
              <a href="#"><li>企业合作</li></a>
              <a href="#"><li>人才招聘</li></a>
              <a href="#"><li>联系我们</li></a>
              <a href="#"><li>常见问题</li></a>
              <a href="#"><li>友情链接</li></a>
          </ul>
  </div>
</body>
</html>


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

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

1回答
山河远阔ZZ 2019-01-17 13:40:13

同学你好,因为图片标签是自带底部间隙的,可以使用浮动去掉间隙,参考下图:

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

高度建议减小一点呀,因为把图片的间隙去掉之后,三张图片加起来的高度小于容器的高度,所以在底部会有一个白色的间隙,参考下图:

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

希望解决了你的问题,祝学习愉快,望采纳!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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