Menu
Coddy logo textTech
COMMENCER À APPRENDRE
flag Fr iconFrançaisdown icon

Mise en évidence du menu actif

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 39 sur 43.

challenge icon

Défi

Facile

Un menu de navigation simple est fourni avec quatre liens. Votre tâche consiste à le rendre plus interactif en utilisant des pseudo-classes.

Écrivez le CSS pour :

  1. Changer la couleur d'arrière-plan d'un lien lorsque l'utilisateur le survole par rgba(50, 168, 82, 1).
  2. Changer la couleur du texte en white lorsque le lien est activement cliqué.

Essayez vous-même

<html>
<head>
  <title>Highlight Active Menu</title>
  <style> 
    nav a {
      padding: 10px;
      text-decoration: none;
      color: black;
    }
    /* Add your styles here */

  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#" class="active">Blog</a>
    <a href="#">Contact</a>
  </nav>
</body>
</html>

Toutes les leçons de CSS Mastery

1Maîtrise des sélecteurs – Combinaisons

IntroductionSélecteur de descendantSélecteur d'enfantSélecteur de frère adjacentSélecteur de frère généralDéfi récapitulatif

4Projet de menu déroulant

Ajouter le sous-menuAfficher le sous-menuPlus de stylesInput et bouton

7Construire avec CSS Grid

Les bases de GridPlacement d'éléments Grid-rowZones nomméesDéfi récapitulatif

2Pseudo-classes interactives

Pseudo-classesEffets de survolEffets de focusStyles actifsDéfi récapitulatif

5Effets visuels

DégradésFiltres CSSTransformationsTransitions et effets de survolDéfi récapitulatif

8Site web Flavor Fiesta

Configuration de la grilleEn-têteLa partie principalePied de page

3Pseudo-classes structurelles

Pseudo-classes structurellesCibler le premier enfantCibler le dernier enfantLa puissance des motifs : utiliser nth-childDéfi récapitulatif

6Landing Page

Styler la section d'en-têteStyler le boutonMise en page de la sectionMise en page des cartesAjouter les touches finales

9Défis finaux

Mise en évidence du menu actifLignes de tableau en zèbreEffet de survol de boutonMise en page de cartes en GridImage Hero floutée