老师,总觉得自己的代码怪,是否有问题?

来源:2-4 编程练习

weixin_慕标3013322

2019-09-17 13:27:10

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    body{
        margin:0;padding:0;color:#fff;text-align:center;

    }
    .container{
        width:1100px;
        height:100px;
        background:black;
        position:absolute;
        margin:0 auto;
        top:50%;
        left:50%;
  margin-top:-50px;
  margin-left:-550px;

  
    }
    .log{
        float:left;

    }
 .nav{
     float:right;}
 a{
        text-decoration:none;
        color:#fff;
        line-height:100px;
        margin:20px;
       
    }

  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class='container'>
    <div class='log'>
        <a href='#'><img src='http://climg.mukewang.com/58c0d2d900016ce303000100.png'/></a>
    </div>
 <div class='nav'>
   <a href='#'>课程</a>
   <a href='#'>职业路径</a>
   <a href='#'>实战</a>
   <a href='#'>猿问</a>
   <a href='#'>手记</a>
 </div>
  </div>
</body>
</html>


写回答

2回答

好帮手慕嘟嘟

2019-09-17

同学你好,

使用谷歌浏览器,右键->检查,打开开发者工具,使用下图标注的小箭头点到对应的位置就可以找到了哦。

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

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


0

好帮手慕嘟嘟

2019-09-17

同学你好,

效果是可以实现的,还有细节需要注意下:

1, .log高度超出了,因此要单独为其设置高度哦。

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

修改为:

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

效果:

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

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


0
heixin_慕标3013322
h 老师,我在源码中也没有看出来log高度超出来了,您是怎么看的啊,教教我
h019-09-17
共1条回复

0 学习 · 40143 问题

查看课程