提问者:小点点

css中的媒体查询工作不正常,括号


一直试图做一个导航栏,虽然通过直播流它@.media命令不影响我的编码,不知道为什么。 它应该只保留一个home标志在移动状态,尽管它并不影响它的全部。 使用chrome浏览器,括号。

请帮帮我。

null

----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/

nav,
header,
footer {
  display: block;
}

body {
  line-height: 1;
  margin: 0;
}


/*################Nav Bar##################*/

nav {
  width: 100%;
  margin: 0;
}

nav ul {
  background-color: #eee;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

ul.topnav li {
  list-style: none;
  float: left;
}

ul.topnav li.topnav-right {
  float: right;
}

ul.topnav li a {
  display: block;
  text-decoration: none;
  min-height: 16px;
  text-align: center;
  padding: 14px;
  text-transform: uppercase;
  color: #666;
}

ul.topnav li a:hover {
  background-color: #0080ff;
  color: #fff;
}

ul.topnav li.dropdownIcon {
  display: none;
}


/*################# mobile #############*/

u/media screen and (max-width: 680px) {
  ul.topnav li:not(:nth-child(1)) {
    display: none;
  }
}
<!doctype html>

<html lang="en">



<head>

  <title> MY CSS website</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <nav>

    <ul class="topnav">

      <li><a href="#home>">Home</a></li>

      <li><a href="#news>">News</a></li>

      <li><a href="#contact>">Contact</a></li>

      <li><a href="#about>">About</a></li>

      <li class="topnav-right"><a href="#signup>">Sign Up</a></li>

      <li class="topnav-right"><a href="#signin>">Sign In</a></li>

      <li class="dropdownIcon"><a href="">\&#9776;

</a></li>

    </ul>

  </nav>

</body>

</html>

null


共1个答案

匿名用户

对我来说还不错。 尝试此代码,您还应该在头脑中包含

null

----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/

nav,
header,
footer {
  display: block;
}

body {
  line-height: 1;
  margin: 0;
}


/*################Nav Bar##################*/

nav {
  width: 100%;
  margin: 0;
}

nav ul {
  background-color: #eee;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

ul.topnav li {
  list-style: none;
  float: left;
}

ul.topnav li.topnav-right {
  float: right;
}

ul.topnav li a {
  display: block;
  text-decoration: none;
  min-height: 16px;
  text-align: center;
  padding: 14px;
  text-transform: uppercase;
  color: #666;
}

ul.topnav li a:hover {
  background-color: #0080ff;
  color: #fff;
}

ul.topnav li.dropdownIcon {
  display: none;
}


/*################# mobile #############*/

@media screen and (max-width: 680px) {
  ul.topnav li:not(:nth-child(1)) {
    display: none;
  }
}
<!doctype html>

<html lang="en">



<head>

  <title> MY CSS website</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <nav>

    <ul class="topnav">

      <li><a href="#home>">Home</a></li>

      <li><a href="#news>">News</a></li>

      <li><a href="#contact>">Contact</a></li>

      <li><a href="#about>">About</a></li>

      <li class="topnav-right"><a href="#signup>">Sign Up</a></li>

      <li class="topnav-right"><a href="#signin>">Sign In</a></li>

      <li class="dropdownIcon"><a href="">\&#9776;

</a></li>

    </ul>

  </nav>

</body>

</html>