recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment ajouter un en-tête unifié à plusieurs sous-pages en HTML ?

<p>Je développe un système de barre de navigation et j'aimerais savoir comment modifier les sous-pages tout en conservant le titre de la page d'origine. (J'utilise repl.it, alors soyez informé). </p> <p>Je n’ai encore rien placé dans le dossier. Je veux aussi qu'il ne change pas de couleur lorsque je survole un élément de classe "active" (la grise). </p> <p> <pre class="brush:css;toolbar:false;">@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap'); corps html{ arrière-plan : #0E1212 ; } ul { type de style de liste : aucun ; marge : 0 ; remplissage : 0 ; débordement caché; couleur d'arrière-plan : aucune ; famille de polices : 'Roboto Mono', monospace ; } li { flotteur : gauche ; } li un { bloc de visualisation; couleur : #DBDBDB ; alignement du texte : centre ; remplissage : 14px 16px ; décoration de texte : aucune ; } li a: survolez { couleur : #682AE9 ; nom de l'animation : exemple ; durée de l'animation : 0,5 s ; nombre d'itérations d'animation : 1 ; animation-fill-mode : avant ; } .actif { couleur : #808080 ; } Exemple de @keyframes { 0 % {couleur : #DBDBDB ;} 100 % {couleur : #622cd8 ;) }</pré> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html lang="fr"> <tête> <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'> <title>Accueil</title> ≪/tête> <corps> ≪/tête> <corps> <ul id='menu'> <li><a class="active" href="#home" id="home">.home()</a></li> <li><a class="inactif" href="#news">.about()</a></li> <li><a class="inactif" href="#contact">.stuff()</a></li> <li><a class="inactif" href="#about">.apply()</a></li> </ul> </corps> </html></pre> </p>
P粉293341969P粉293341969496 Il y a quelques jours561

répondre à tous(1)je répondrai

  • P粉642436282

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

    Pour répondre à la partie de votre question sur le maintien de la couleur de la classe active constante en survol, j'ai créé une autre @keyframe ，使得在 0% 和 100% 时它们都保持灰色。然后我使用 transition: 0.5s; pour adoucir la transition animée du changement de couleur. 

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

    Comme vous pouvez le voir, lorsque vous survolez le premier lien (c'est-à-dire l'état actif), il est toujours gris et les autres liens deviennent violets en 0.5s de temps.

    répondre
    0
  • Annulerrépondre