Visuell ansprechende Unternehmenskarte erstellen

CSSCSSBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Projekt lernst du, wie du eine Unternehmenskarte eines Benutzers mit HTML und CSS erstellst. Ziel ist es, eine visuell ansprechende und gut strukturierte Unternehmenskarte zu erstellen, die genutzt werden kann, um die Informationen eines Benutzers darzustellen.

👀 Vorschau

Beispiel einer fertigen Unternehmenskarte

🎯 Aufgaben

In diesem Projekt wirst du lernen:

  • Wie du das Projekt einrichtest und die erforderlichen Dateien öffnest
  • Wie du die Karte und die Benutzer-Avatar-Elemente mithilfe von CSS zentrierst
  • Wie du die linken Textelemente (Stufe und Punkte) horizontal zentrierst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

  • Eine HTML-Seite für eine Unternehmenskarte zu strukturieren
  • CSS verwenden, um die Elemente auf der Seite zu gestalten und zu positionieren
  • Techniken zur horizontalen und vertikalen Zentrierung von Elementen anzuwenden

Projekt einrichten

In diesem Schritt wirst du das Projekt einrichten und die Dateien im Editor öffnen.

Öffne das Projektverzeichnis, das die folgenden Dateien und Verzeichnisse enthält:

├── avatar.png
├── style.css
└── index.html

Hierbei:

  • index.html ist die Hauptseite.
  • style.css ist die Datei, in der du die erforderlichen Stile hinzufügen musst.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Vorschau auf unvollendetes Projekt

Karte und Avatar zentrieren

In diesem Schritt wirst du den TODO-Abschnitt in style.css vervollständigen, um die Karte und die Benutzer-Avatar-Elemente zu zentrieren.

  1. Locate the TODO section in the style.css file.
  2. Füge die erforderlichen CSS-Regeln hinzu, um die Karte (Klasse = card) und die Benutzer-Avatar-Elemente (Klasse = avatar) horizontal und vertikal zu zentrieren.
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. Speichere die Änderungen in der style.css-Datei.
  2. Aktualisiere den Browser, um das fertige Ergebnis zu sehen. Das fertige Ergebnis ist wie folgt:
Zentrierter Karte und Avatar-Ergebnis

Herzlichen Glückwunsch! Du hast das Projekt "Benutzer-Unternehmenskarten" erfolgreich abgeschlossen.

✨ Lösung prüfen und üben

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.