Bagaimana untuk menambah pengepala bersatu pada berbilang halaman kecil dalam HTML?

Question

Saya sedang membangunkan sistem bar navigasi dan ingin tahu cara membuat subhalaman berubah tetapi tajuk halaman asal kekal. (Saya menggunakan repl.it, jadi maklum). Saya belum meletakkan apa-apa dalam folder lagi. Saya juga mahu ia tidak berubah warna apabila saya menuding pada item dengan kelas "aktif" (yang kelabu). @importurl('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&displa

P粉642436282 · Answer

Untuk menjawab bahagian soalan anda tentang mengekalkan warna kelas aktif tetap pada tuding, apa yang saya lakukan ialah mencipta satu lagi @keyframe ，使得在 0% 和 100% 时它们都保持灰色。然后我使用 transition: 0.5s; untuk melancarkan peralihan animasi perubahan warna.

    @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()

Seperti yang anda lihat, apabila anda menuding pada pautan pertama (iaitu keadaan aktif), ia masih kelabu dan pautan lain bertukar menjadi ungu dalam masa 0.5s masa.