Création d'une page d'accueil de site web d'actualités responsive

Introduction

Dans ce projet, vous allez apprendre à créer la page d'accueil du site web du journal LabEx Daily. Vous serez responsable de la mise en place de la structure HTML et du style des différentes sections de la page d'accueil à l'aide de CSS.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment mettre en place la structure HTML pour la page d'accueil de LabEx Daily
• Comment styler la section d'en-tête, y compris le logo et les boutons de navigation
• Comment styler la section de bannière, y compris l'image téléphonique et la zone de contenu
• Comment styler la section du titre d'onglet, y compris le texte "Dernières nouvelles" et "Plus"
• Comment styler la section de liste d'actualités, y compris la disposition des articles et le bouton "Plus"
• Comment styler la section de pied de page, y compris les sections gauche et droite

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Créer une page d'accueil responsive et visuellement attrayante pour un site web d'actualités
• Utiliser CSS pour styler différentes sections d'une page web
• Positionner et aligner des éléments à l'aide de CSS
• Appliquer diverses propriétés CSS pour obtenir le design souhaité

Skills Graph

Configure la structure du projet

Dans cette étape, vous allez configurer la structure du projet et préparer les fichiers et dossiers nécessaires.

Le code initial de cette question a déjà été fourni. Ouvrez l'environnement de codage, et la structure de répertoire est la suivante :

├── 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

Où :

• css/style.css est le fichier de style qui doit être complété pour ce défi.
• images contient les fichiers d'images utilisés dans le projet.
• index.html est la page d'accueil du projet LabEx Daily.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la VM et rafraîchissez-le manuellement et vous verrez la page.

Veuillez compléter le fichier de style css/style.css (ne modifiez pas le style css de base déjà donné) de sorte que la page d'accueil de LabEx Daily ait l'allure suivante (la largeur totale de la page est de 1024px) :

Stylisez l'en-tête

Dans cette étape, vous allez apprendre à styliser la section d'en-tête de la page d'accueil de LabEx Daily. Suivez les étapes ci-dessous pour terminer cette étape :

1. Ouvrez le fichier css/style.css dans votre éditeur de code.
2. Ajoutez la règle CSS suivante après /* TODO */ pour ajuster le style de l'en-tête :

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

.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: black;
  line-height: 32px;
  text-align: center;
}

Ces règles CSS stylent l'en-tête, y compris le logo de LabEx Daily, le bouton "Télécharger l'application" et leur effet au survol.

Stylisez la bannière

Dans cette étape, vous allez apprendre à styliser la section de bannière de la page d'accueil de LabEx Daily. Suivez les étapes ci-dessous pour terminer cette étape :

1. Ouvrez le fichier css/style.css dans votre éditeur de code.
2. Ajoutez les règles CSS suivantes au fichier css/style.css :

/* 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;
}

Ces règles CSS stylent la section de bannière, y compris la couleur d'arrière-plan, la positionnement de l'image téléphonique et la zone de contenu avec le titre et la description.

Stylisez le titre d'onglet

Dans cette étape, vous allez apprendre à styliser la section du titre d'onglet de la page d'accueil de LabEx Daily. Suivez les étapes ci-dessous pour terminer cette étape :

1. Ouvrez le fichier css/style.css dans votre éditeur de code.
2. Ajoutez les règles CSS suivantes au fichier css/style.css :

/* 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;
}

Ces règles CSS stylent la section du titre d'onglet, y compris la couleur d'arrière-plan, le positionnement du texte "Parcourir le contenu" et "Derniers contenus", et leurs styles respectifs.

Stylisez la liste d'actualités

Dans cette étape, vous allez apprendre à styliser la section de la liste d'actualités de la page d'accueil de LabEx Daily. Suivez les étapes ci-dessous pour terminer cette étape :

1. Ouvrez le fichier css/style.css dans votre éditeur de code.
2. Ajoutez les règles CSS suivantes au fichier css/style.css :

/* 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: white;
}

.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;
}

Ces règles CSS stylent la section de la liste d'actualités, y compris la disposition des articles d'actualités, la taille et le positionnement de l'image, les styles de texte et le bouton "Découvrez plus dans l'application!" en bas.

Stylisez le pied de page

Dans cette dernière étape, vous allez apprendre à styliser la section du pied de page de la page d'accueil de LabEx Daily. Suivez les étapes ci-dessous pour terminer cette étape :

1. Ouvrez le fichier css/style.css dans votre éditeur de code.
2. Ajoutez les règles CSS suivantes au fichier css/style.css :

/* 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;
}

Ces règles CSS stylent la section du pied de page, y compris la couleur d'arrière-plan, la disposition des sections gauche et droite, les styles de texte et le positionnement de l'image du code QR.

Félicitations! Vous avez maintenant terminé la mise en forme de la page d'accueil de LabEx Daily. Vous pouvez maintenant ouvrir le fichier index.html dans votre navigateur web pour voir le résultat final.

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.