barre de marche CSS

Dans la conception Web, les barres d'étapes sont un élément de navigation courant qui peut aider les utilisateurs à mieux comprendre où ils se trouvent actuellement et quelles étapes suivre. Dans cet article, nous allons vous montrer comment créer une barre d'étape simple en utilisant CSS.

Tout d'abord, nous avons besoin d'une liste avec des étapes, comme celle-ci :

<ul>
  <li>步骤一</li>
  <li>步骤二</li>
  <li>步骤三</li>
  <li>步骤四</li>
</ul>

Ensuite, nous devons ajouter des styles à la barre d'étapes. Tout d'abord, nous ajoutons le style de base suivant à la liste :

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

Ce code CSS supprimera le style par défaut de la liste et la définira sur une mise en page flexible. Dans le même temps, nous définissons la propriété justifier-contenu sur espace-entre afin que les éléments de la liste soient répartis uniformément dans le conteneur.

Ensuite, nous devons styliser les éléments de la liste, en leur ajoutant des cercles et des chiffres. Voici le code de style :

li {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #fff;
  position: relative;
}
li:before {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  height: 1px;
  width: 50%;
  background-color: #ccc;
}
li:first-child:before {
  display: none;
}
li.active {
  background-color: #f00;
}
li.active:before {
  background-color: #f00;
}

Dans celui-ci, nous définissons la largeur et la hauteur de l'élément de liste et le définissons sur un cercle. Nous définissons également des propriétés telles que l’alignement du texte, l’audace de la police, la couleur et la hauteur des lignes. Nous avons également ajouté une ligne pointillée avant chaque élément de la liste via le pseudo-élément CSS :before pour séparer chaque étape.

Enfin, nous utilisons la classe .active pour marquer l'élément de liste de l'étape en cours et lui ajoutons un arrière-plan rouge et une icône avant via un style spécifique.

Le style final de la barre d'étape ressemble à ceci :

Lors de l'utilisation de la barre d'étape, il nous suffit d'ajouter la classe .active à l'élément de liste correspondant. Par exemple, si vous en êtes actuellement à la deuxième étape, vous pouvez modifier le code comme suit :

<ul>
  <li>步骤一</li>
  <li class="active">步骤二</li>
  <li>步骤三</li>
  <li>步骤四</li>
</ul>

Avec les paramètres de style CSS ci-dessus, nous pouvons facilement créer une barre d'étape de style personnalisée pour aider les utilisateurs à mieux comprendre l'emplacement actuel de la barre d'étape. et les prochaines étapes.

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!