麻烦老师看看我的有没有不对的地方,有点不是很确定用得对不对

麻烦老师看看我的有没有不对的地方,有点不是很确定用得对不对

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{

        padding:0;

        margin:0;

    }

    .top{

        background-color: black;

width:1100px;

height:100px;

overflow: hidden;

zoom:1;

position: fixed;

top:50%;

left:50%;

margin-left: -550px;

margin-top: -50px;

    }

    .logo{

        float:left;

cursor:pointer;

    }

    .nav{

        color: white;

height: 30px;

float: right;

position: relative;

top:50%;

margin-top:-15px;

    }

    li{

        list-style:none;

        float:left;

font-size: 24px;

padding:0 40px;

cursor:pointer;

    }

  </style>

</head>

<body>

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

  <div class="top">

      <div class="logo">

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

      </div>

      <div class="nav">

          <ul>

              <li>课程</li>

              <li>职业路径</li>

              <li>实战</li>

              <li>猿问</li>

              <li>手记</li>

          </ul>

      </div>

  </div>

</body>

</html>


正在回答

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

2回答

同学你好,关于同学的问题回答如下:

1、logo图超出了父容器:

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

这是因为图片是内联样式,底部自带默认间隙,可以设置为块级元素清除:

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

2、右侧的导航项部分,没有实现垂直居中显示:

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

不建议同学使用定位实现,是比较麻烦的,可以直接设置行高等于高度实现:

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

如果我的回答帮助了你,欢迎采纳。祝学习愉快~

  • 1.请问怎么查看图片上那样的高度?我按了F12以后点左下角那个框里有个箭头的图标,然后发现这个图片的高度是100不是104呢?换成火狐浏览器也是一样…… 2.下边那个行高不是100吧?
    2020-08-08 22:37:46
  • 我知道了 是我自己搞错了 现在明白了 您是对的
    2020-08-10 15:13:55
好帮手慕言 2020-08-09 09:58:13

同学你好,解答如下:

1、img标签自带间隙,会撑大父级的高度,可以按照下方步骤查看

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

2、高度为100px,如果行高设置为100px,就可以实现垂直居中的效果。

祝学习愉快~

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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