Javascript 我的快速响应导航栏没有'；他工作不好_Javascript_Html_Css

Javascript 我的快速响应导航栏没有'；他工作不好

javascript html css

Javascript 我的快速响应导航栏没有'；他工作不好,javascript,html,css,Javascript,Html,Css,我已经为手机屏幕制作了一个反应灵敏的导航条，但效果不太好。当它出现在手机屏幕上时会缩小，但当我点击图标导航栏时，它不会在手机屏幕上展开。当出现在手机屏幕上时，单击图标按钮不起作用。我的密码在这里。请帮忙 <body> <div class="first" id="myfirst"> <a href="#home">Home</a> <a href="#news">Ne

我已经为手机屏幕制作了一个反应灵敏的导航条，但效果不太好。当它出现在手机屏幕上时会缩小，但当我点击图标导航栏时，它不会在手机屏幕上展开。当出现在手机屏幕上时，单击图标按钮不起作用。我的密码在这里。请帮忙

<body>

        <div class="first" id="myfirst">
            <a href="#home">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
            <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
        </div>
      </body>

    .first  a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .first  a:hover {
      background-color: #ddd;
      color: black;
    }

    .first  .icon {
      display: none;
    }

    @media screen and (max-width: 600px) {
      .first  a:not(:first-child) {display: none;}
      .first  a.icon {
        float: right;
        display: block;
      }
    }

    @media screen and (max-width: 600px) {
      .responsive {
          position: relative;
        }
      .responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .responsive a {
        float: none;
        display: block;
        text-align: left;
      }

    }


.第一{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.第一：悬停{
背景色：#ddd；
颜色：黑色；
}
.首先，图标{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.first a:not（：first child）{display:none；}
.第一个a.图标{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.反应迅速{
位置：相对位置；
}
.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.有反应的{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}

效果不理想，因为CSS是Ca编码和

。第一个a:not（：第一个子项）

选择器的优先级高于

。响应性a

选择器

因此，修复代码的最快方法是更改最后一个

。以这种方式响应选择器：
.responsive a:first-child,
.responsive a:not(:first-child) {
  float: none;
  display: block;
  text-align: left;
}

最后，有几点建议：

最好使用nav
HTML5元素而不是div
：它加强了代码语义
避免相同的@媒体屏幕和（最大宽度：600px）{
媒体查询：这会削弱可读性和可维护性
改进类语义，提供更合适的名称（例如：在open
中重命名responsive
）
如果没有html标记，您的css代码将毫无用处。请提供一个工作示例。请提供一个工作示例。无法理解。请解释感谢您的回答，先生。