Question

我正在为朋友创建网站。

不幸的是，我不熟悉响应式开发，也不熟悉CSS。我尝试在我的网格站点上实现W3Schools.com的代码（对我来说也是新的东西），但它没有成功。

以下是W3Schools.com的链接：https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

我希望当前菜单页旁边的中心有一个图标。

这是我的代码：

＆＃13;

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "header") {
    x.className += " responsive";
  } else {
    x.className = "header";
  }
}

＆＃13;

body {
  background-color: #FFF;
  display: flex;
  justify-content: center;
  font-family: "Times New Roman", Times, serif;
  margin: 0;
}


/*grid and rows adjustments*/

.container {
  display: grid;
  width: 100%;
  height: 100vh;
  grid-template-columns: 2.5fr 2fr 2fr;
  grid-template-rows: 80px 0.5fr 1fr 20px;
  grid-gap: 0px;
  grid-template-areas:
}

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}

.sidebar {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}

.content-1 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.content-2 {
  grid-row: 3 / 4;
  grid-column: 2 / span 2;
}


/*.content-3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}*/

.footer {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

.header ul li {
  list-style-type: none;
  float: left;
  height: 100%;
}

.header ul li a {
  color: #000;
  padding: 30px 25px;
  text-decoration: none;
  display: block;
}

.header ul li a.active {
  background-color: #C1CFD0;
  color: white;
}

.header ul li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

.header .icon {
  display: none;
}


/* OTHER STYLES */

.item {
  background-color: #C1CFD0;
  background-image: linear-gradient(130deg, #C1CFD0 0%, #C1CFD0 85%, #C1CFD0 100%);
  /*box-shadow: 0 10px 20px;*/
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.header {
  background-color: #909fa0;
  background: linear-gradient(to left, #C1CFD0;
  , #909fa0);
  box-shadow: 5px 10px 20px;
}

.sidebar {
  background-color: #909fa0;
}

.sidebar img {
  height: 100%;
  max-width: 100%;
  background-size: cover;
}

.content-1,
.content-2,
.content-3 {
  background-image: linear-gradient(to left, #9FC4D2, #E4E3DE);
}

.footer {
  background-color: #2c3e50;
}

.content-1 {
  display: inline;
  text-align: center;
}

.content-1 h1 {
  animation-name: h1animation;
  animation-duration: 2s;
}

.content-1 h2 {
  font-size: 2em;
  animation-name: h1animation;
  animation-duration: 3s;
}

.content-2>p {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  animation-name: h1animation;
  animation-duration: 5s;
}


/* Standard syntax */

@keyframes h1animation {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*responsive version of the site*/

@media only screen and (max-width: 1200px) {
  .sidebar {
    background-image: url("../img/contact1a.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 100%;
  }
}


/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
  .container {
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 0.5fr 1fr 20px;
    grid-gap: 0px;
  }
  .content-1 {
    background-image: url("../img/violinead.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .header .icon {
    display: block;
    float: right;
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css" />
  <script src="scripts/script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="" charset="utf-8"></script>
</head>

<body>
  <div class="container">
    <div class="item header" id="myTopnav">
      <ul>
        <li><a class="active" 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><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
      </ul>
    </div>
    <div class="item sidebar">
      <img src="img/contact1.jpg" alt="contact1">
    </div>
    <div class="item content-1">
      <h1><br><br><br>André Rothweiler</h1>
      <h2>Web-designer</h2>
    </div>
    <div class="item content-2">
      <p>I’m an enthusiastic web-developer currently working as a freelancer in Zurich, Switzerland. I love to learn new things and create them! Just take a look on this side, to find out more about me! </p>
    </div>
    <!-- <div class="item content-3">Content-3</div> -->
    <div class="item footer">footer</div>
  </div>
</body>

</html>

＆＃13;

我希望你能帮助我！

友好的问候。

Answer 1

W3C教程添加并删除了课程＆＃34;响应＆＃34;点击图标时。你没有该课程的任何CSS，所以它不会有任何影响。

响应式图标不起作用

1 个答案: