Mise en page responsive avec barre latérale

Introduction

Dans ce laboratoire, nous allons explorer le monde de la programmation CSS. L'objectif principal de ce laboratoire est de fournir une expérience pratique de création d'une mise en page responsive avec une barre latérale. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière d'utiliser les propriétés display: grid et minmax() pour créer une mise en page efficace et visuellement attrayante.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer une mise en page responsive avec une zone de contenu et une barre latérale, utilisez display: grid sur le conteneur parent, minmax() pour la deuxième colonne (barre latérale) pour lui permettre de prendre entre 150px et 20%, et 1fr pour la première colonne (contenu principal) pour prendre le reste de l'espace restant. Voici un exemple de code HTML et CSS :

<div class="container">
  <main>This element is 1fr large.</main>
  <aside>Min: 150px / Max: 20%</aside>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;
}

main,
aside {
  padding: 12px;
  text-align: center;
}

main {
  background: #d4f2c4;
}

aside {
  background: #81cfd9;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations! Vous avez terminé le laboratoire Mise en page responsive avec barre latérale. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.