Gib deiner Seite einen neuen Look

Einführung

In diesem Projekt lernst du, wie du eine Anmeldeseite mit einer schönen Schnittstelle entwirfst und gestaltest. Ziel ist es, eine visuell ansprechende Anmeldeseite zu erstellen, die eine angenehme Benutzererfahrung bietet.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Projektstruktur einrichtest und die bereitgestellten Dateien verstehst
• Wie du den Körper und die Navigationsleiste der Anmeldeseite stylst
• Wie du das Anmeldeformular stylst, einschließlich des Avatar-Bilds, des Formularcontainers, der Formularelemente und des Texts

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Mit CSS eine visuell ansprechende Layout für die Anmeldeseite zu erstellen
• Verschiedene Elemente eines Anmeldeformulars, wie Eingabefelder, Buttons und Text, zu stylen
• Bilder und Hintergrundstile einzubauen, um das Gesamtdesign der Anmeldeseite zu verbessern

Skills Graph

Projektstruktur einrichten

In diesem Schritt lernst du, wie du die Projektstruktur für die Anmeldeseite einrichtest.

1. Öffne die Lab-Umgebung und navigiere zum Projektverzeichnis.
2. Im Projektverzeichnis solltest du die folgende Dateistruktur sehen:

├── css
│   └── style.css
├── images
│   ├── background-pic.jpg
│   ├── cat.png
│   └── icon.png
└── index.html

3. In der Datei css/style.css wirst du deinen CSS-Code schreiben, um die Anmeldeseite zu stylen. Im Ordner images befinden sich die in Projekt verwendeten Bilddateien.
4. Öffne die Datei index.html in einem Texteditor. Dies ist die HTML-Datei, die die Struktur der Anmeldeseite enthält.
5. Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
6. Öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Körper und Navigationsleiste stylen

In diesem Schritt wirst du den Körper und die Navigationsleiste der Anmeldeseite stylen.

1. Öffne die Datei css/style.css in einem Texteditor.
2. Füge folgenden CSS-Code zur Datei hinzu:

/* Füge deinen CSS-Code hier hinzu */
body {
  background-image: url("../images/background-pic.jpg");
  background-size: cover;
  color: #fff;
  height: 945;
  width: 1920;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-bar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 15px;
}

Dieser Code setzt das Hintergrundbild für den Körper, den Navigationsleistenstil und fügt ein Bild in die obere rechte Ecke der Seite hinzu, um auf das Profil zuzugreifen.

Anmeldeformular stylen

In diesem Schritt wirst du das Anmeldeformular stylen.

1. Füge folgenden CSS-Code zur Datei css/style.css hinzu:

.content > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 125px;
  margin-top: -100px;
}

.content-container {
  margin: 100px auto;
  width: 450px;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.45);
  border-radius: 10px;
}

.form {
  text-align: center;
}

.form > h2 {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 20px;
}

button {
  width: 80px;
  height: 30px;
  border: #041c32;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
  margin: 10px;
}

input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
}

.text {
  text-align: center;
  margin: 10px;
}

.text > a {
  text-decoration: none;
  color: white;
}

Dieser Code formatiert das Anmeldeformular, einschließlich des Avatar-Bilds, des Formularcontainers, der Formularelemente (Überschrift, Button und Eingabefelder) und des Texts am unteren Rand des Formulars.

Überprüfen und testen des Endergebnisses

In diesem Schritt kannst du die Ähnlichkeit deiner abgeschlossenen Seite mit der tatsächlich vorgegebenen Seite testen.

1. Speichere die Änderungen in der Datei style.css.
2. Aktualisiere den Browser, um das fertige Ergebnis zu sehen. Nachdem du die vorherigen Schritte abgeschlossen hast, wirst du lernen, wie du mithilfe von CSS-Syntax eine Seite layouten und veredeln kannst, um deine Anmeldeseite so weit wie möglich wie folgt zu gestalten:

Herzlichen Glückwunsch! Du hast das Projekt erfolgreich abgeschlossen, um deine Anmeldeseite zu verändern.

Zusammenfassung

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