关于这题的两点疑问

关于这题的两点疑问

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{

        margin:0;

        padding:0;

    }

    .nav{

        width:100%;

        height:100px;

        background-color:black;

        position: fixed;

        

    }

    .content{

       margin:0px 0 0px 0 ;

        background-color:black;

    }

    .foot{

        width:100%;

        height:100px;

        background-color:black;

text-align: center;

        

    }

.content img{

 width:100%

 

 

 }

 .nav ul{

 list-style: none;

 float:right;

 }

 .nav ul li{

 

 float:left;

 color: white;

 margin-right: 20px;

 line-height: 100px;

 

 }

 .foot ul{

 list-style:none;

 

 }

 .foot ul li{

 color:white;

 margin-right: 20px;

 line-height: 100px;

 display: inline-block;

 }

  </style>

</head>

<body>

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

  <div class="nav">

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

  <ul>

      <li>职业路径</li>

      <li>实战</li>

      <li>猿问</li>

      <li>手记</li>

  </ul>

  </div>

  <div class="content">

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

      <br>

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

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

  </div> 

  <div class="foot">

  <ul>

      <li>网站首页</li>

      <li>企业合作</li>

      <li>人才招聘</li>

      <li>联系我们</li>

      <li>意见反馈</li>

      <li>友情链接</li>

  </ul>

  </div>

  

</body>

</html>

  1. 我的图片间的空隙可以消除吗?

  2. 为什么我的foot一旦加上“position:fixed”就会整个消失呢

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

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

1回答
小丸子爱吃菜 2017-07-11 15:43:39

1、给图片设置margin-top:-3px;就能消除图片之间的空隙。

2、foot设置了fixed后再设置一个bottom:0;就可以了。

祝学习愉快!

  • 我想问一下图片之间为什么会有缝隙呢,margin设为零了呀
    2017-07-18 21:54:25
  • 图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的。所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小(不设置字体大小的时候浏览器有默认的字体大小)。解决办法给img定义vertical-align或者定义为块状,最优的解决办是定义vertical-align,注:定义vertical-align为middle时在IE6中大概还有一像素的顶边距,最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零,font-size:0。祝学习愉快!
    2017-07-19 11:49:14
  • 明白了,谢谢老师
    2017-07-19 12:04:20
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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