前辈，慕课网logo我是用设置背景的方式实现的，请帮我看一下我的代码有问题吗？是否规范？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin:0;padding:0;border:0;}
    .con{
        width:1100px;
        height:100px;
        background:#000;
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;
    }
    .logo{
        width:300px;
        height:100px;
        float:left;
        background:url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png);
    }
    .nav{
        float:right;
        width:800px;
        height:100px;
        list-style:none;
        font-family:微软雅黑;
        font-size:16px;
    }
    .nav li{
        float:left;
        width:160px;
        line-height:100px;
        text-align:center;
        color:#fff;
    }
    a{text-decoration:none;color:#fff;}
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="con">
      <a href="#"><div class="logo"></div></a>
      <ul class="nav">
          <li><a href="#">课程</a></li>
          <li><a href="#">职业路径</a></li>
          <li><a href="#">实战</a></li>
          <li><a href="#">猿问</a></li>
          <li><a href="#">手记</a></li>
      </ul>
  </div>
</body>
</html>

秋之枫华 2019-08-10

源自：CSS网页布局基础 2-4 编程练习

收起

2回答

好帮手慕码回答被采纳获得+3积分 2019-08-11 09:36:05

同学你好！

代码效果实现是可以的。a标签包含div标签也是可以的，但更加推荐用div标签包含a标签，块级标签包含内联标签，这样更加规范哦~

如果帮助到了你欢迎采纳祝学习愉快~

收起回答

秋之枫华提问者 #1

因为我logo部分是给div设置了背景，也就是说div是空内容的，如果直接这样写<div class="logo"><a href="#"></a></div>，鼠标移上去好像没有反应啊，需要给a标签设置什么样式吗？

2019-08-11 13:26:55
秋之枫华提问者 #2

给a标签设了宽高，然后转块元素，效果就达到了，请问对吗？ .logo a{width: 300px;height: 100px;display: block;}

2019-08-11 13:29:37
好帮手慕码回复提问者秋之枫华 #3

这种方式也是可以的哦，很棒，祝学习愉快~

2019-08-11 13:59:27