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

Question

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). Ich habe noch nichts in den Ordner gelegt. 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. @importurl('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&displa

P粉642436282 · Answer

回答你问题中关于保持激活类在悬停时颜色不变的部分，我所做的就是创建了另一个 @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;
      )
    }





  
  
  
  
  
  Home






  

  

    
      .home()
      .about()
      .stuff()
      .apply()

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

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial