Comment utiliser CSS pour créer une navigation par étapes simple

La navigation par étapes est souvent utilisée dans la conception Web. Elle peut faciliter le fonctionnement des utilisateurs, en particulier lors de l'exécution de tâches en plusieurs étapes. Elle aidera les utilisateurs à mieux comprendre la progression actuelle et à maîtriser le processus d'opération. Dans cet article, nous verrons comment utiliser CSS pour créer une navigation par étapes simple.

Tout d'abord, nous devons ouvrir un fichier HTML, puis créer un élément div contenant la navigation par étapes dans le fichier. Cet élément div aura un nom de classe : "step-nav".

<div class="step-nav">

</div>

Ensuite, nous devons créer un élément d'étape personnalisé pour chaque étape. Dans cet exemple, nous allons créer une navigation en quatre étapes.

<div class="step-nav">
  <div class="step">
    <span>步骤1</span>
  </div>
  <div class="step">
    <span>步骤2</span>
  </div>  
  <div class="step">
    <span>步骤3</span>
  </div>
  <div class="step">
    <span>步骤4</span>
  </div>
</div>

Chaque étape est un élément div personnalisé avec un nom de classe "step" et un élément span contenant le nom de l'étape.

Ensuite, nous devons utiliser CSS pour personnaliser notre navigation dans les étapes. Tout d'abord, nous définirons les styles de base pour les classes "step-nav" et "step".

.step-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  margin: 0 10px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
}

Ici, nous avons utilisé Flexbox pour centrer la navigation des étapes et laisser les éléments de l'étape être répartis horizontalement. De plus, nous définissons les propriétés de style telles que la largeur, la couleur d'arrière-plan, les marges, l'alignement du texte, la hauteur de ligne, la taille de la police, la couleur du texte et le rayon de la bordure de l'élément step.

Maintenant, nous souhaitons ajouter un style à l'étape active (c'est-à-dire l'étape sur laquelle se trouve actuellement l'utilisateur). Nous pouvons utiliser le sélecteur de pseudo-classe ":nth-child" pour sélectionner le premier élément de l'étape.

.step:nth-child(1) {
  background-color: #007aff;
}

Ici, on change la couleur de fond du premier élément de la navigation d'étape en bleu pour indiquer qu'il s'agit d'une étape active.

Ensuite, nous devons ajouter des styles de survol pour chaque étape. Lorsque l'utilisateur passe la souris sur l'élément step, nous pouvons ajouter des couleurs vives via CSS pour attirer l'attention de l'utilisateur.

.step:hover {
  background-color: #ff4a57;
}

Maintenant, nous pouvons voir que notre navigation par étapes a déjà quelques styles de base. Cependant, nous devons également ajouter des connexions entre les étapes pour mieux représenter le flux entre les étapes. Nous pouvons utiliser les sélecteurs de pseudo-éléments "::before" et "::after" pour créer des lignes de forme rectangulaire.

.step::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 20px solid #ccc;
  left: -20px;
  z-index: -1;
}

.step:first-child::before {
  display: none;
}

.step:last-child::after {
  display: none;
}

.step::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 20px solid #ccc;
  right: -20px;
  z-index: -1;
}

Ici, nous utilisons le positionnement absolu pour ajouter des pseudo-éléments à chaque étape, et définissons l'attribut "content" sur "" sur ceux-ci afin qu'ils ne produisent aucun texte. Nous avons également utilisé la propriété "border" pour créer des lignes de forme rectangulaire.

Enfin, nous utilisons les pseudo-classes "first-child" et "last-child" pour sélectionner les première et dernière étapes et ajouter leurs pseudo-éléments "::before" et "::after" sont masqués pour éviter les lignes horizontales redondantes aux deux extrémités de la navigation par étapes.

Maintenant, nous avons terminé tout le style de notre navigation par étapes personnalisée. Nous pouvons voir le résultat final dans le navigateur.

<html>
  <head>
    <style>
      .step-nav {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .step {
        width: 100px;
        height: 50px;
        background-color: #ccc;
        margin: 0 10px;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        color: #fff;
        border-radius: 5px;
        position: relative;
      }

      .step:nth-child(1) {
        background-color: #007aff;
      }

      .step:hover {
        background-color: #ff4a57;
      }

      .step::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-right: 20px solid #ccc;
        left: -20px;
        z-index: -1;
      }

      .step:first-child::before {
        display: none;
      }

      .step::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 20px solid #ccc;
        right: -20px;
        z-index: -1;
      }

      .step:last-child::after {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="step-nav">
      <div class="step">
        <span>步骤1</span>
      </div>
      <div class="step">
        <span>步骤2</span>
      </div>  
      <div class="step">
        <span>步骤3</span>
      </div>
      <div class="step">
        <span>步骤4</span>
      </div>
    </div>
  </body>
</html>

En général, la navigation par étapes est l'un des éléments très pratiques de la conception Web. Elle peut faciliter le fonctionnement des utilisateurs, en particulier lors de l'exécution de tâches en plusieurs étapes. Créer une navigation simple étape par étape à l'aide de CSS est relativement simple, il suffit de prendre soin des détails de style.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!