老师请帮看下代码是否需要完善?

来源:2-4 编程练习

Nyakoonya

2020-08-21 17:01:44

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    body,div,span{
        margin: 0;
        padding:0;
    }
    .nav{
        width: 1100px;
        height: 100px;
        background: black;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -550px;
        
    }
    .navbar{
        width: auto;
        height: 20px;
        position: absolute;
        right:0;
        top: 50%;
        margin-top: -10px;
        color: #fff;
    }
    .list{
        margin: 30px;
    }
    .list a{
        text-decoration: none;
        color: #fff
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="nav">
    <div class="logo">
        <a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
    </div>
    <div class="navbar">
        <span class="list"><a href="#">课程</a></span>
        <span class="list"><a href="#">职业路径</a></span>
        <span class="list"><a href="#">实战</a></span>
        <span class="list"><a href="#">猿问</a></span>
        <span class="list"><a href="#">手记</a></span>
    </div>
  </div>
</body>
</html>

写回答

1回答

好帮手慕久久

2020-08-21

同学你好,代码中有如下问题可优化:

1. a标签没有完全包裹图片:

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

原因是图片具有特殊性,它无法撑开a标签。

建议将a标签转成块级元素,如下:

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

另外,logo所在的父元素高度超出:

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

原因是图片是行内元素,底部有默认的间隙。

建议将它也转成块级元素:

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

2. 文字所在的父元素navbar是垂直居中的,但是文字不一定是垂直居中的,因为不确定文字在父元素navbar中是否是垂直居中的。

建议文字垂直居中使用行高实现,如下:

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

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

1

0 学习 · 40143 问题

查看课程