Das Erstellen einer CSS -Zeitleiste erfordert nur HTML und CSS, kein JavaScript. 2. Verwenden Sie strukturierte HTML mit Zeitpunkten und Inhalten; 3. Zeichnen Sie eine zentrale vertikale Linie auf den Beh?lter durch :: vor Pseudo-Element; 4. Verwenden Sie das Layout und die Positionierung von Flexbox, um die Anordnung von links und rechts inhaltlich zu steuern. 5. Fügen Sie kreisf?rmige Markierungspunkte für jeden Zeitpunkt hinzu; 6. Responsive Design durch Medienabfragen analysieren, den Inhalt auf der linken Seite ordnen und die Timeline -Position auf dem kleinen Bildschirm anpassen. Erkenne endlich eine sch?ne und reaktionsschnelle vertikale Zeitleiste und wird mit mehreren Ger?ten angezeigt.

Das Erstellen einer Zeitleiste mit CSS ist eine gro?artige M?glichkeit, Ereignisse in chronologischer Reihenfolge visuell anzuzeigen. Sie brauchen kein JavaScript - nur HTML und CSS. Hier erfahren Sie, wie Sie eine saubere, vertikale Zeitleiste erstellen, die reaktionsschnell und einfach anpassen kann.

1. grundlegende HTML -Struktur

Beginnen Sie mit einer einfachen Struktur unter Verwendung eines Container- und Timeline -Elements. Jeder Artikel enth?lt ein Datum, einen Titel und einen Inhalt.

 <div class = "Timeline">
  <div class = "timeline-item">
    <div class = "timeline-dat"> 2023 </div>
    <div class = "Timeline-In-Intent">
      <h3> Projekt gestartet </H3>
      <p> Wir haben unser erstes gro?es Produkt gestartet. </p>
    </div>
  </div>

  <div class = "timeline-item">
    <div class = "timeline-dat"> 2024 </div>
    <div class = "Timeline-In-Intent">
      <h3> erweitertes Team </h3>
      <p> wuchs von 5 auf 20 Teammitglieder. </p>
    </div>
  </div>

  <div class = "timeline-item">
    <div class = "timeline-date"> 2025 </div>
    <div class = "Timeline-In-Intent">
      <h3> Globale Ver?ffentlichung </h3>
      <p> ver?ffentlichte die App weltweit. </p>
    </div>
  </div>
</div>

2. CORE CSS für die Zeitleistenlinie und das Layout

Verwenden Sie ein Pseudoelement (wie ::before ) am Beh?lter, um die zentrale Linie zu zeichnen. Positionieren Sie jeden Element relativ zu dieser Zeile.

 .timeline {
  Position: Relativ;
  Max-Breite: 800px;
  Rand: 0 Auto;
  Polsterung: 20px 0;
}

/ * Die vertikale Linie *///
.Timeline :: vor {
  Inhalt: '';
  Position: absolut;
  Top: 0;
  unten: 0;
  Breite: 4px;
  Hintergrund: #007BFF;
  Links: 50%;
  Transformation: Translatex (-50%);
}

.timeline-item {
  Position: Relativ;
  Randboden: 30px;
  Anzeige: Flex;
  Rechtfertigungsbek?mpfung: Weltraum zwischen;
  Ausrichtung: Zentrum;
}

/ * Alternatives Layout von links/rechts inhaltlich *//
.timeline-item: n-te-Kind (ungerade) .Timeline-in-Intent {
  Ordnung: 1;
  Rand-Rechts: 50px;
  Text-Align: Recht;
}

.timeline-item: n-te-Kind (sogar) .Timeline-in-Intent {
  Ordnung: 2;
  Rand-Links: 50px;
  Text-Align: links;
}

.Timeline-date {
  Schriftgewicht: fett;
  Farbe: #333;
  Polsterung: 8px 12px;
  Hintergrund: #007BFF;
  Farbe: wei?;
  Border-Radius: 6PX;
}

3. Timeline -Marker (Punkte) hinzufügen

Verwenden Sie ::before jedem .timeline-item um runde Markierungen auf der Linie zu erstellen.

 .timeline-item :: vor {
  Inhalt: '';
  Position: absolut;
  Breite: 20px;
  H?he: 20px;
  Hintergrund: wei?;
  Grenze: 4px Solid #007BFF;
  Grenzradius: 50%;
  Top: 50%;
  Links: 50%;
  Transformation: Translate (-50%, -50%);
  Z-Index: 1;
}

4. Responsive Design

Stapeln Sie den Inhalt auf kleineren Bildschirmen auf einer Seite und zentrieren Sie die Zeitleiste.

 @media (max-Width: 768px) {
  .Timeline :: vor {
    links: 30px;
  }

  .timeline-item {
    Flex-Richtung: S?ule;
    Ausrichtung: Flex-Start;
  }

  .timeline-item :: vor {
    links: 30px;
  }

  .Timeline-Datum,
  .Timeline-in-intent {
    Rand-Links: 50px;
    Text-Align: links;
  }

  .Timeline-in-intent {
    Rand: 10px;
  }
}

Schlüsseltipps

• Verwenden Sie position: relative auf .timeline-item , damit die Markerpunkte korrekt positioniert sind.
• Passen Sie left: 50% und transform die Elemente mit der Mittellinie.
• Verwenden Sie für eine horizontale Zeitleiste flex-direction: row , aber vertikal h?ufiger und einfacher zu reagieren.
• Sie k?nnen Animationen (z. B. im Scroll) sp?ter mit JavaScript hinzufügen.

Grunds?tzlich ist es nur eine clevere Verwendung von Positionierung, Pseudoelementen und Flexbox. Mit ein wenig CSS erhalten Sie eine professionell aussehende Zeitleiste, die über Ger?te hinweg funktioniert.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Zeitleiste mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!