Question

试图创建导航栏，尽管通过实时流@ .media命令不会影响我的编码，也不知道为什么。尽管它不会影响所有操作，但它应该仅使房屋标志保持移动状态。使用chrome浏览器，方括号。

请帮助我。

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

Answer 1

似乎对我来说很好。尝试使用此代码，您还应该在头脑中加入<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

CSS中的媒体查询无法正常运行，括号

1 个答案: