suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie füge ich in HTML einen einheitlichen Header zu mehreren Unterseiten hinzu?

<p>Ich entwickle ein Navigationsleistensystem und möchte wissen, wie ich die Unterseiten ändern kann, aber der Titel der Originalseite bleibt erhalten. (Ich verwende repl.it, seien Sie also darauf hingewiesen). </p> <p>Ich habe noch nichts im Ordner abgelegt. Ich möchte auch, dass sich die Farbe nicht ändert, wenn ich mit der Maus über ein Element mit der Klasse „aktiv“ (die graue) fahre. </p> <p> <pre class="brush:css;toolbar:false;">@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap'); HTML-Körper{ Hintergrund: #0E1212; } ul { Listenstiltyp: keiner; Rand: 0; Polsterung: 0; Überlauf versteckt; Hintergrundfarbe: keine; Schriftfamilie: „Roboto Mono“, Monospace; } li { schweben: links; } li a { Bildschirmsperre; Farbe: #DBDBDB; Textausrichtung: Mitte; Polsterung: 14px 16px; Textdekoration: keine; } li a:hover { Farbe: #682AE9; Animationsname: Beispiel; Animationsdauer: 0,5 s; Anzahl der Animationsiterationen: 1; Animationsfüllmodus: vorwärts; } .aktiv { Farbe: #808080; } @keyframes-Beispiel { 0 % {Farbe: #DBDBDB;} 100 % {Farbe: #622cd8;) }</pre> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="home.css"> <script src='script.js'> </script> <title>Startseite</title> </head> <Körper> </head> <Körper> <ul id='menu'> <li><a class="active" href="#home" id="home">.home()</a></li> <li><a class="inactive" href="#news">.about()</a></li> <li><a class="inactive" href="#contact">.stuff()</a></li> <li><a class="inactive" href="#about">.apply()</a></li> </ul> </body> </html></pre> </p>
P粉293341969P粉293341969453 Tage vor522

Antworte allen(1)Ich werde antworten

  • P粉642436282

    P粉6424362822023-09-04 00:25:02

    回答你问题中关于保持激活类在悬停时颜色不变的部分，我所做的就是创建了另一个 @keyframe ，使得在 0% 和 100% 时它们都保持灰色。然后我使用 transition: 0.5s; 来使颜色变化的动画过渡平滑。

        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');
html body {
  background: #0E1212;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
  font-family: 'Roboto Mono', monospace;
}

li {
  float: left;
}

li a {
  display: block;
  color: #DBDBDB;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: #682AE9;
  transition: 0.5s;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.active {
  color: #808080;
}

.active:hover {
  color: #808080;
}

@keyframes .active {
  0% {
    color: #808080;
  }
  100% {
    color: #808080;
    )
  }
 
  @keyframes example {
    0% {
      color: #DBDBDB;
    }
    100% {
      color: #622cd8;
      )
    }
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="home.css">
  <script src='script.js'>
  </script>
  <title>Home</title>
</head>

<body>



  </head>

  <body>

    <ul id='menu'>
      <li><a class="active" href="#home" id="home">.home()</a></li>
      <li><a class="inactive" href="#news">.about()</a></li>
      <li><a class="inactive" href="#contact">.stuff()</a></li>
      <li><a class="inactive" href="#about">.apply()</a></li>
    </ul>

  </body>

</html>

    如你所见，当你悬停在第一个链接上（即激活状态），它仍然是灰色的，其他链接在 0.5s 的时间内变为紫色。

    Antwort
    0
  • StornierenAntwort