Schönes Startseiten-Layout erstellen | Webdesign-Tutorial

Einführung

In diesem Projekt lernst du, wie du eine einfache und schöne Startseite für die LabEx Knowledge Network-Website gestalten kannst. Ziel ist es, eine ästhetisch ansprechende Startseite zu entwerfen, die die Inhalte und Funktionen der Website effektiv präsentiert.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Projekt-Dateien und -Struktur einrichtest
Wie du den oberen Bereich der Seite stylst, einschließlich des Headers und der Navigation
Wie du den Inhalt innerhalb des Header-Bereichs stylst
Wie du den Inhaltsbereich der Seite stylst
Wie du den Fußbereich der Seite stylst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Ein visuell ansprechendes Layout mit CSS zu erstellen
Die HTML- und CSS-Dateien für eine Webseite zu strukturieren und zu organisieren
CSS-Stile auf verschiedene Abschnitte einer Webseite anzuwenden
sicherzustellen, dass das Layout auf verschiedene Bildschirmgrößen reagiert und konsistent ist

Projekt einrichten

In diesem Schritt wirst du die Projekt-Dateien und -Struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner, der die folgenden Dateien und Verzeichnisse enthält:
- css/style.css
- index.html
Füge im Datei css/style.css folgenden Code hinzu, um die Basisstile für die Seite festzulegen:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Dieser Code setzt den Standardabstand und die Standardauffüllung aller Elemente zurück und legt die box-sizing-Eigenschaft auf border-box fest, was es einfacher macht, die Größe der Elemente zu steuern.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
Öffne "Web 8080" oben in der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Den oberen Bereich gestalten

In diesem Schritt wirst du den oberen Bereich der Seite gestalten, der den Header und die Navigation umfasst.

Füge im Datei css/style.css folgenden Code hinzu, um den oberen Bereich zu stylen:

.top {
  background-color: #a6b1e1;
}

.nav {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 10px;
}

.nav > span {
  font-size: 18px;
  color: white;
  margin-right: 365px;
  font-weight: 600;
}

.nav_c span {
  font-size: 16px;
  color: white;
  margin-right: 28px;
  font-weight: 600;
}

.nav_c span:nth-child(7) {
  margin-right: 0px;
}

Dieser Code setzt die Hintergrundfarbe des oberen Bereichs auf #a6b1e1, zentriert den Header-Bereich mit einer Breite von 1024px und formatiert das Navigationsmenü.

Den Header-Inhalt stylen

In diesem Schritt wirst du den Inhalt innerhalb des Header-Bereichs stylen.

Füge im Datei css/style.css folgenden Code hinzu, um den Header-Inhalt zu stylen:

.header {
  width: 1024px;
  margin: 0 auto;
  height: 440px;
  padding-top: 13px;
}

.header_text {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 30px;
}

.title_header {
  font-size: 45px;
  color: black;
  margin-bottom: 62px;
}

.title_p {
  font-size: 21px;
  font-weight: 200;
  color: white;
  margin-bottom: 36px;
}

.join {
  color: #efbfbf;
  border-radius: 2px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-shadow: inset 0 0 0 2px #efbfbf;
}

Dieser Code zentriert den Header-Inhalt vertikal und horizontal und formatiert den Titel, den Absatz und die Schaltfläche "Beitreten".

Den Inhaltsbereich stylen

In diesem Schritt wirst du den Inhaltsbereich der Seite stylen.

Füge im Datei css/style.css folgenden Code hinzu, um den Inhaltsbereich zu stylen:

.content {
  width: 1024px;
  margin: 74px auto 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 302px;
}

.content.item {
  height: 144px;
  width: 502px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.content.item span {
  font-size: 30px;
  font-weight: 200;
  color: black;
}

.content.item p {
  font-size: 18px;
  color: #aaa;
  line-height: 1.4em;
}

Dieser Code zentriert den Inhaltsbereich, erstellt ein Flex-Layout mit zwei Elementen pro Zeile und formatiert die einzelnen Inhaltelemente.

In diesem Schritt wirst du den Footer der Seite stylen.

Füge im Datei css/style.css folgenden Code hinzu, um den Footer zu stylen:

.footer {
  width: 100%;
  height: 80px;
  border-top: 2px solid #aaa;
}

.footer_text {
  width: 1024px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  color: #aaa;
  padding-top: 30px;
}

Dieser Code setzt die Höhe des Footers auf 80px, fügt eine 2px breite obere Grenze in der Farbe #aaa hinzu und zentriert den Footer-Text.

Mit diesen Schritten hast du die Gestaltung und das Layout der Startseite des LabEx Knowledge Network abgeschlossen.

Das fertige Ergebnis ist wie folgt: