Créer une mise en page de page d'accueil magnifique | Tutoriel de conception web

Introduction

Dans ce projet, vous allez apprendre à créer une mise en page simple et élégante pour le site web du LabEx Knowledge Network. L'objectif est de concevoir une page d'accueil esthétiquement agréable qui présente efficacement le contenu et les fonctionnalités du site web.

👀 Aperçu

Prévisualisation de la mise en page de la page d'accueil du LabEx

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer les fichiers et la structure du projet
Comment styliser la partie supérieure de la page, y compris l'en-tête et la navigation
Comment styliser le contenu à l'intérieur de la zone d'en-tête
Comment styliser la zone de contenu de la page
Comment styliser le pied de page de la page

🏆 Réalisations

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

Créer une mise en page visuellement attrayante à l'aide de CSS
Structurer et organiser les fichiers HTML et CSS pour une page web
Appliquer des styles CSS à différentes sections d'une page web
Vérifier que la mise en page est responsive et cohérente sur différentes tailles d'écran

Configurez le projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour compléter cette étape :

Ouvrez le dossier du projet, qui contient les fichiers et les répertoires suivants :
- css/style.css
- index.html
Dans le fichier css/style.css, ajoutez le code suivant pour définir les styles de base de la page :

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

Ce code remet à zéro la marge et le rembourrage par défaut de tous les éléments, et définit la propriété box-sizing sur border-box, ce qui facilite la commande de la taille des éléments.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement, et vous verrez la page.

Stylisez la partie supérieure

Dans cette étape, vous allez styliser la partie supérieure de la page, qui comprend l'en-tête et la navigation.

Dans le fichier css/style.css, ajoutez le code suivant pour styliser la partie supérieure :

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

Ce code définit la couleur d'arrière-plan de la partie supérieure sur #a6b1e1, centre la zone d'en-tête avec une largeur de 1024px et style le menu de navigation.

Stylisez le contenu de l'en-tête

Dans cette étape, vous allez styliser le contenu à l'intérieur de la zone d'en-tête.

Dans le fichier css/style.css, ajoutez le code suivant pour styliser le contenu de l'en-tête :

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

Ce code centre le contenu de l'en-tête verticalement et horizontalement, et style le titre, le paragraphe et le bouton "Join".

Stylisez la zone de contenu

Dans cette étape, vous allez styliser la zone de contenu de la page.

Dans le fichier css/style.css, ajoutez le code suivant pour styliser la zone de contenu :

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

Ce code centre la zone de contenu, crée une mise en page flexible avec deux éléments par ligne et style les éléments de contenu individuels.

Stylisez le pied de page

Dans cette étape, vous allez styliser le pied de page de la page.

Dans le fichier css/style.css, ajoutez le code suivant pour styliser le pied de page :

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

Ce code définit la hauteur du pied de page sur 80px, ajoute une bordure de 2px en haut dans la couleur #aaa et centre le texte du pied de page.

Avec ces étapes, vous avez terminé la mise en page et la présentation de la page d'accueil du LabEx Knowledge Network.

Le résultat final est le suivant :