Comment créer une chronologie verticale dans CSS

Pour créer une chronologie verticale, utilisez d'abord la structure HTML pour construire un conteneur d'événements, puis implémentez la connexion centrale et la mise en page entrelacée via CSS. 1. Utiliser .Timeline :: Avant pour créer une ligne verticale centrée; 2. Utilisez Flex-Direction: Row-Reverse pour organiser alternativement les éléments; 3. Embellir les nœuds et les boîtes de contenu via .Timeline-Dot et .Timeline-Content; 4. Ajoutez des requêtes multimédias pour obtenir une adaptation mobile et finalement obtenir une disposition de chronologie verticale réactive et magnifique.

La création d'une chronologie verticale dans CSS est un modèle de conception courant utilisé pour afficher des événements ou des étapes dans une disposition chronologique propre. Il est largement utilisé dans les Portfolioos, les sections d'histoire ou le suivi des progrès du projet. Voici comment construire une chronologie verticale simple mais efficace à l'aide de HTML et CSS.

Structure de base et configuration HTML

Commencez par une structure HTML propre. Chaque événement ou étape de la chronologie est enveloppé dans un conteneur, à l'aide d'éléments div . Vous aurez également besoin d'une ligne centrale pour connecter les événements.

 <div class = "timeline">
  <div class = "timeline-item">
    <div class = "timeline-dot"> </div>
    <div class = "timeline-content">
      <h3> Titre de l&#39;événement 1 </H3>
      <p> janvier 2023 </p>
      <p> Ceci est une description du premier événement. </p>
    </div>
  </div>

  <div class = "timeline-item">
    <div class = "timeline-dot"> </div>
    <div class = "timeline-content">
      <h3> Titre de l&#39;événement 2 </H3>
      <p> mars 2023 </p>
      <p> Description du deuxième événement. </p>
    </div>
  </div>

  <div class = "timeline-item">
    <div class = "timeline-dot"> </div>
    <div class = "timeline-content">
      <h3> Titre de l&#39;événement 3 </h3>
      <p> juillet 2023 </p>
      <p> Description du troisième événement. </p>
    </div>
  </div>
</div>

Styliser la ligne verticale et la mise en page

Utilisez CSS pour créer la ligne centrale et positionner les événements. Le conteneur .timeline agit comme une colonne Flexbox, et chaque .timeline-item contient un point et un bloc de contenu.

 .chronologie {
  Position: relative;
  largeur maximale: 800px;
  marge: 0 auto;
  rembourrage: 20px 0;
}

.Timeline :: avant {
  contenu: '';
  Position: absolue;
  Gauche: 50%;
  en haut: 0;
  en bas: 0;
  Largeur: 2px;
  Contexte: #ddd;
  Transform: Translatex (-50%);
}

.Timeline-Item {
  Affichage: flex;
  justifier-contenu: espace-intermédiaire;
  marge-fond: 30px;
  Position: relative;
}

.Timeline-Item: Nth-Child (même) {
  Flex-Direction: Row-Reverse;
}

Le ::before le pseudo-élément crée la ligne verticale dans le centre. Utilisation left: 50% et transform: translateX(-50%) centre la ligne. L'alternance de la direction de l'article avec nth-child(even) donne un aspect décalé propre.

Styliser les points et les boîtes de contenu

Maintenant, stylisez les points et les conteneurs de contenu pour rendre la chronologie visuellement attrayante.

 .Timeline-dot {
  Largeur: 16px;
  hauteur: 16px;
  Contexte: # 007BFF;
  Border-Radius: 50%;
  flex-shrink: 0;
  marge: 0 20px;
  Z-Index: 1;
}

.Timeline-Content {
  Contexte: # F8F9FA;
  rembourrage: 20px;
  Border-Radius: 8px;
  Box-Shadow: 0 2px 4px RGBA (0,0,0,0,1);
  Largeur: 45%;
}

.Timeline-Item: Nth-Child (même) .Timeline-Content {
  marge-gauche: auto;
}

Le .timeline-dot apparaît comme un petit cercle sur la ligne de chronologie. Les boîtes .timeline-content sont stylisées de rembourrage, d'ombre et de coins arrondis. Pour même les éléments, le contenu est poussé vers la droite en utilisant margin-left: auto lorsque la ligne est inversée.

Améliorations facultatives

Vous pouvez améliorer la conception avec quelques touches supplémentaires:

• Ajoutez des animations sur défilement à l'aide de JavaScript ou @keyframes .
• Utilisez des icônes au lieu des points.
• Rendez-le réactif en passant à une seule colonne sur mobile:

 @media (max-large: 768px) {
  .Timeline :: avant {
    Gauche: 30px;
  }

  .TiMeline-Item, .Timeline-Item: Nth-Child (même) {
    Direction flexible: ligne;
  }

  .Timeline-Content {
    Largeur: calc (100% - 80px);
  }

  .Timeline-dot {
    marge-gauche: 0;
  }
}

Cette version mobile déplace la ligne vers la gauche et empile le contenu à droite du point, améliorant la lisibilité sur les petits écrans.

C'est ça. Avec juste HTML et CSS, vous avez construit une chronologie verticale réactive facile à personnaliser et à étendre. Vous pouvez ajouter des dates, des images ou des liens en fonction de vos besoins. La clé consiste à utiliser un positionnement relatif et absolu pour la ligne, Flexbox pour la mise en page et l'alignement minutieux pour l'équilibre visuel.

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!