Question

我为手机屏幕制作了一个响应式导航栏，但效果不佳。当它进入移动屏幕时它会缩小，但当我点击图标导航栏时，它不会在移动屏幕上展开。当点击移动屏幕时，点击图标按钮不起作用。我的代码在这里。请帮忙..

<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;
      }

    }

Answer 1

效果不理想，因为CSS C ascading，而.first a:not(:first-child)选择器的优先级高于.responsive a。

因此，修复代码的最快方法是以这种方式更改上一个.responsive a选择器：

.responsive a:first-child,
.responsive a:not(:first-child) {
  float: none;
  display: block;
  text-align: left;
}

最后，只提出几点建议：

最好使用nav HTML5元素而不是div：它会加强代码语义
避免相同的@media screen and (max-width: 600px) {媒体查询：它会削弱可读性和可维护性
改进类语义，提供更合适的名称（例如：responsive中重命名open）

我的响应式导航栏功能不佳

1 个答案: