Titres de section collants : Améliorez l'expérience utilisateur avec CSS

Introduction

Dans ce laboratoire, nous allons explorer le monde du CSS et ses capacités en créant une liste avec des titres collants pour chaque section. Le but est de montrer comment utiliser la propriété position: sticky pour créer une interface utilisateur conviviale qui améliore l'expérience utilisateur. Grâce à ce laboratoire, vous apprendrez à utiliser le CSS pour créer des pages web visuellement attrayantes et fonctionnelles.

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.

Liste avec des titres de section collants

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

Pour créer une liste avec des titres collants pour chaque section, suivez ces étapes :

Autorisez le conteneur de liste (<dl>) à déborder verticalement en utilisant overflow-y: auto.
Collez les titres (<dt>) au sommet du conteneur en définissant leur position sur sticky et en appliquant top: 0.
Utilisez le code HTML et CSS suivant :

HTML :

<div class="container">
  <dl class="sticky-stack">
    <dt>A</dt>
    <dd>Algérie</dd>
    <dd>Angola</dd>

    <dt>B</dt>
    <dd>Bénin</dd>
    <dd>Botswana</dd>
    <dd>Burkina Faso</dd>
    <dd>Burundi</dd>

    <dt>C</dt>
    <dd>Cabo Verde</dd>
    <dd>Cameroun</dd>
    <dd>République centrafricaine</dd>
    <dd>Tchad</dd>
    <dd>Comores</dd>
    <dd>Congo, République démocratique du</dd>
    <dd>Congo, République du</dd>
    <dd>Côte d'Ivoire</dd>

    <dt>D</dt>
    <dd>Djibouti</dd>

    <dt>E</dt>
    <dd>Égypte</dd>
    <dd>Guinée équatoriale</dd>
    <dd>Érythrée</dd>
    <dd>Eswatini (anciennement Swaziland)</dd>
    <dd>Éthiopie</dd>
  </dl>
</div>

CSS :

.container {
  display: grid;
  place-items: center;
  min-height: 400px;
}

.sticky-stack {
  background: #37474f;
  color: #fff;
  margin: 0;
  height: 320px;
  border-radius: 1rem;
  overflow-y: auto;
}

.sticky-stack dt {
  position: sticky;
  top: 0;
  font-weight: bold;
  background: #263238;
  color: #cfd8dc;
  padding: 0.25rem 1rem;
}

.sticky-stack dd {
  margin: 0;
  padding: 0.75rem 1rem;
}

.sticky-stack dd + dt {
  margin-top: 1rem;
}

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

Sommaire

Félicitations ! Vous avez terminé le laboratoire Liste avec des titres de section collants. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.