Tableau des étapes CSS

Step Chart CSS

Le diagramme d'étapes est un outil de diagramme courant qui explique un processus ou un processus opérationnel à travers une série d'instructions d'étape simples. Les diagrammes d'étapes utilisent généralement des figures géométriques marquées de chiffres, de texte ou de flèches pour illustrer clairement le processus opérationnel. Dans la conception et le développement Web, les diagrammes d'étapes sont souvent utilisés dans les didacticiels, les guides, les pages de description de produits, etc.

La technologie CSS a rendu la conception de diagrammes d'étapes plus simple, plus rapide et plus belle. Avec quelques codes CSS simples, vous pouvez créer des diagrammes d'étapes clairs, beaux et élégants.

1. Créer un cadre de carte par étapes

Tout d'abord, nous devons créer un cadre de carte par étapes, c'est-à-dire un conteneur qui contient une série de tuiles d'étape. Vous pouvez créer ce cadre en utilisant HTML et CSS.

<div class="steps-container">
    <div class="step">
        <span class="step-number">1</span>
        <p class="step-description">步骤1</p>
    </div>
    <div class="step">
        <span class="step-number">2</span>
        <p class="step-description">步骤2</p>
    </div>
    <div class="step">
        <span class="step-number">3</span>
        <p class="step-description">步骤3</p>
    </div>
</div>

Dans le code ci-dessus, nous avons d'abord créé un conteneur de diagramme d'étapes (.steps-container), puis avons ajouté trois vignettes d'étapes (.step) à l'intérieur. Chaque vignette d'étape comprend un numéro d'étape (.step-number) et une description d'étape (.step-description).

2. Concevoir des styles de blocs d'étapes

Maintenant, nous devons ajouter des styles à chaque bloc d'étapes. Ici, nous utiliserons la syntaxe CSS pour ajouter des styles tels que des bordures, des arrière-plans, des ombres et des coins arrondis à chaque vignette d'étape.

.step {
    border: 2px solid #999;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
}

Dans le code, nous ajoutons une bordure solide de 2 pixels de large à chaque vignette d'étape et utilisons border-radius pour ajouter des coins arrondis de 6 pixels à la vignette. La couleur d'arrière-plan a été définie sur blanc et une ombre gris clair a été ajoutée au bloc d'étape à l'aide de la propriété box-shadow.

Afin de rendre les numéros d'étape et les instructions d'étape plus centrés et plus beaux, nous utilisons des propriétés telles que l'affichage et l'alignement des éléments pour centrer les vignettes d'étape et ajouter une quantité appropriée d'espacement et de remplissage.

3. Ajouter des styles au numéro d'étape

En utilisant CSS, nous pouvons ajouter des styles au numéro d'étape (.step-number) très simplement. Le code suivant peut être utilisé pour définir la taille, la couleur et le style de police du numéro d'étape :

.step-number {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #999;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
}

Le code ci-dessus ajoutera un style de cercle (border-radius : 50 %) au numéro d'étape (.step-number) et définissez sa taille (largeur et hauteur et autres attributs), la couleur d'arrière-plan (background-color) et la couleur du texte (color). Pour centrer le numéro de pas, nous utilisons les propriétés text-align et line-height.

4. Ajouter des connexions entre les tuiles d'étape

Avec un simple code CSS, nous pouvons créer des flèches, des connexions et d'autres styles de lignes entre les tuiles d'étape. Le code suivant crée un style de flèche pour les vignettes d'étape :

.step:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 15px 0 15px;
    border-color: #999 transparent transparent transparent;
    transform: translateX(-50%);
}

Ce bloc de code ajoute un pseudo-élément avant chaque vignette d'étape (.step) pour créer des flèches (:before) entre les vignettes d'étape. Nous utilisons la propriété position pour aligner les flèches au-dessus de chaque vignette d'étape, et utilisons les propriétés -transform et left pour centrer les flèches horizontalement.

En modifiant les propriétés de style dans le bloc de code ci-dessus, vous pouvez également créer des connexions de style droites, pointillées et arrondies entre les blocs d'étapes.

Avec les techniques CSS simples ci-dessus, vous pouvez créer rapidement des effets de diagramme d'étapes magnifiques et détaillés, améliorant ainsi les effets visuels et la convivialité des didacticiels, des guides, des descriptions de produits et d'autres pages.

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!