Erstelle eine responsiv Nachrichtenwebsite - Startseite

Einführung

In diesem Projekt lernst du, wie du die Startseite der LabEx Daily - Zeitungswwebsite erstellst. Du wirst für die Einrichtung der HTML - Struktur und das Gestalten der verschiedenen Abschnitte der Startseite mit CSS verantwortlich sein.

👀 Vorschau

Vorschau der LabEx Daily - Startseite

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die HTML - Struktur für die LabEx Daily - Startseite einrichtest
Wie du den Kopfzeilenabschnitt gestaltest, einschließlich des Logos und der Navigationsbuttons
Wie du den Bannerabschnitt gestaltest, einschließlich des Telefonbilds und des Inhaltsbereichs
Wie du den Tab - Titelabschnitt gestaltest, einschließlich des Textes "Neueste Nachrichten" und "Mehr"
Wie du den Nachrichtenlisteabschnitt gestaltest, einschließlich der Layoutung der Nachrichtenartikel und des "Mehr" - Buttons
Wie du den Fußzeilenabschnitt gestaltest, einschließlich der linken und rechten Abschnitte

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Eine responsive und visuell ansprechende Startseite für eine Nachrichtenwebsite zu erstellen
CSS verwenden, um verschiedene Abschnitte einer Webseite zu gestalten
Elemente mit CSS positionieren und ausrichten
Verschiedene CSS - Eigenschaften anzuwenden, um das gewünschte Design zu erreichen

Projektstruktur einrichten

In diesem Schritt wirst du die Projektsstruktur einrichten und die erforderlichen Dateien und Ordner vorbereiten.

Der Anfangscode für diese Aufgabe wurde bereits bereitgestellt. Öffne die Codierumgebung, und die Verzeichnisstruktur ist wie folgt:

├── css
│   └── style.css
├── images
│   ├── 1.jpg
│   ├── 2.jpg
│   ├── 3.jpg
│   ├── 4.jpg
│   ├── 5.jpg
│   ├── 6.jpg
│   ├── 7.jpg
│   ├── phone_sample.png
│   └── qr.png
└── index.html

Dabei gilt:

css/style.css ist die Styledatei, die für diese Herausforderung abgeschlossen werden muss.
images enthält die in Projekt verwendeten Bilddateien.
index.html ist die Startseite des LabEx Daily - Projekts.

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.

Bitte vervollständige die css/style.css - Styledatei (verändere nicht den bereits gegebenen Basis - CSS - Stil), sodass die LabEx Daily - Startseite wie folgt aussieht (gesamtbreite der Seite ist 1024px):

Bildbeschreibung

Den Header gestalten

In diesem Schritt wirst du lernen, wie du den Kopfzeilenbereich der LabEx Daily - Startseite gestaltest. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei css/style.css in deinem Code - Editor.
Füge die folgenden CSS - Regeln nach /* TODO */ hinzu, um den Überschriftstil anzupassen:

/* header */
.headerbox {
  height: 78px;
  background-color: weiß;
}

.navbox {
  padding: 23px;
}

.navbox h1 {
  color: #0099f2;
  float: left;
}

.navright {
  float: right;
}

.on {
  display: inline - block;
  width: 120px;
  height: 32px;
  color: #0099f2;
  background-color: #f0f9ff;
  line-height: 32px;
  text-align: center;
}

.on + a {
  display: inline - block;
  width: 120px;
  height: 32px;
  color: schwarz;
  line-height: 32px;
  text-align: center;
}

Diese CSS - Regeln gestalten die Kopfzeile, einschließlich des LabEx Daily - Logos, der Schaltfläche "APP Download" und deren Hover - Effekt.

In diesem Schritt wirst du lernen, wie du den Bannerbereich der LabEx Daily - Startseite gestaltest. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei css/style.css in deinem Code - Editor.
Füge die folgenden CSS - Regeln zur Datei css/style.css hinzu:

/* banner */
.banner {
  position: relative;
  overflow: hidden;
  height: 460px;
  background-color: #008bed;
}

.container {
  width: 964px;
  height: 430px;
  position: absolute;
  bottom: 0px;
  padding: 30px 30px 0px 30px;
}

.container img {
  width: 409px;
  position: absolute;
  bottom: -15px;
}

.content {
  width: 43%;
  padding-top: 100px;
  float: right;
}

.content h2 {
  color: #fdfdfd;
  font-size: 40px;
  line-height: 40px;
  padding-bottom: 10px;
}

.info {
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  color: #99d1f8;
}

Diese CSS - Regeln gestalten den Bannerbereich, einschließlich der Hintergrundfarbe, die Positionierung des Telefonbilds und des Inhaltsbereichs mit Titel und Beschreibung.

Den Tab - Titel gestalten

In diesem Schritt wirst du lernen, wie du den Tab - Titelbereich der LabEx Daily - Startseite gestaltest. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei css/style.css in deinem Code - Editor.
Füge die folgenden CSS - Regeln zur Datei css/style.css hinzu:

/* tabtitle */
.tabtitle {
  width: 960px;
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  background-color: rgb(249, 249, 249);
}

.tabtitle h3 {
  line-height: 100px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  float: left;
}

.tabtitle h4 {
  line-height: 100px;
  font-weight: 500;
  font-size: 24px;
  color: #cccccc;
  float: right;
}

Diese CSS - Regeln gestalten den Tab - Titelbereich, einschließlich der Hintergrundfarbe, die Positionierung des Textes "Inhalte durchsuchen" und "Neuste Inhalte" sowie deren jeweilige Stile.

Den Nachrichten - Listenstil gestalten

In diesem Schritt wirst du lernen, wie du die Nachrichtenliste auf der LabEx Daily - Startseite gestaltest. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei css/style.css in deinem Code - Editor.
Füge die folgenden CSS - Regeln zur Datei css/style.css hinzu:

/* list */
.list {
  position: relative;
  background-color: rgb(249, 249, 249);
  height: 1718px;
  padding-bottom: 30px;
}

.list ul {
  list-style: none;
}

.list li {
  margin-left: 30px;
  margin-bottom: 20px;
  padding-top: 20px;
  float: left;
  background-color: weiß;
}

.list img {
  display: block;
  margin-top: 20px;
  width: 260px;
  height: 260px;
  margin: auto;
}

.list a {
  display: block;
  width: 300px;
  height: 374px;
}

.list p {
  width: 260px;
  font-size: 14px;
  line-height: 25px;
  color: #333333;
  margin: auto;
}

.more {
  position: absolute;
  bottom: 30px;
  width: 960px;
  height: 62px;
  left: 32px;
  background-color: #e8eef2;
  text-align: center;
}

.more a {
  display: block;
  width: 100%;
  line-height: 62px;
  font-size: 20px;
  color: #59abdf;
}

Diese CSS - Regeln gestalten die Nachrichtenliste, einschließlich des Layouts der Nachrichtenartikel, der Größe und Positionierung des Bildes, der Textstile und der Schaltfläche "Entdecke mehr in der App!" unten.

In diesem letzten Schritt wirst du lernen, wie du den Footerbereich der LabEx Daily - Startseite gestaltest. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei css/style.css in deinem Code - Editor.
Füge die folgenden CSS - Regeln zur Datei css/style.css hinzu:

/* footer */
.footer {
  height: 265px;
  background-color: #e5e5e5;
}

.footerBox {
  width: 960px;
  padding: 32px;
}

.footerL {
  width: 710px;
  height: 210px;
  float: left;
}

.footerL p {
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 15px;
  color: #000;
}

.footerR {
  float: right;
  text-align: center;
}

.footerR img {
  width: 141px;
  height: 152px;
}

Diese CSS - Regeln gestalten den Footerbereich, einschließlich der Hintergrundfarbe, des Layouts der linken und rechten Abschnitte, der Textstile und der Positionierung des QR - Code - Bildes.

Herzlichen Glückwunsch! Du hast jetzt die Gestaltung der LabEx Daily - Startseite abgeschlossen. Du kannst jetzt die Datei index.html in deinem Webbrowser öffnen, um das Endresultat zu sehen.

LabEx Daily homepage footer

Zusammenfassung

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

Erstellen einer responsiven Nachrichtenwebsite - Startseite