Les Listes

Démonstration : Types de listes

Liste avec icônes personnalisées

Comparaison : outside vs inside

Démonstration : Compteurs CSS

Démonstration : Checklist stylisée

Démonstration : Navigation en liste

Démonstration : Breadcrumb en liste

Composant Timeline

/* HTML */
<ol class="timeline">
  <li class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <h3>Janvier 2024</h3>
      <p>Lancement du projet</p>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <h3>Mars 2024</h3>
      <p>Première version beta</p>
    </div>
  </li>
</ol>

/* CSS */
.timeline {
  list-style: none;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.timeline-item {
  position: relative;
  padding-left: 48px;
  padding-bottom: 2rem;
}

.timeline-marker {
  position: absolute;
  left: 8px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #3b82f6;
}

.timeline-content h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.timeline-content p {
  color: #64748b;
  font-size: 0.9rem;
}

Liste de fonctionnalités avec icônes custom

/* CSS */
.feature-list {
  list-style: none;
  padding: 0;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
}

.feature-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 1rem;
}

.feature-icon.blue { background: #dbeafe; }
.feature-icon.green { background: #dcfce7; }
.feature-icon.purple { background: #f3e8ff; }

.feature-text strong {
  display: block;
  margin-bottom: 0.125rem;
}

.feature-text span {
  font-size: 0.85rem;
  color: #64748b;
}

Structure FAQ avec details/summary

/* HTML */
<dl class="faq">
  <div class="faq-item">
    <dt>
      <button class="faq-question">
        Qu'est-ce que CSS ?
        <span class="faq-icon">+</span>
      </button>
    </dt>
    <dd class="faq-answer">
      <p>CSS (Cascading Style Sheets) est un langage de
      styles utilisé pour décrire la présentation des
      documents HTML.</p>
    </dd>
  </div>
</dl>

/* Utiliser details/summary (natif) */
<details class="faq-item">
  <summary class="faq-question">
    Qu'est-ce que CSS ?
  </summary>
  <div class="faq-answer">
    <p>CSS est un langage de styles...</p>
  </div>
</details>

/* CSS */
.faq-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: white;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.faq-answer {
  padding: 0 1.25rem 1rem;
  color: #64748b;
  line-height: 1.6;
}

details[open] .faq-icon {
  transform: rotate(45deg);
}

Indicateur d'étapes horizontales

/* HTML */
<ol class="steps">
  <li class="step-item completed">
    <span class="step-num">1</span>
    <span class="step-label">Inscription</span>
  </li>
  <li class="step-item active">
    <span class="step-num">2</span>
    <span class="step-label">Vérification</span>
  </li>
  <li class="step-item">
    <span class="step-num">3</span>
    <span class="step-label">Paiement</span>
  </li>
</ol>

/* CSS */
.steps {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #e2e8f0;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}

.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #94a3b8;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.step-item.completed .step-num {
  background: #22c55e;
  color: white;
}

.step-item.active .step-num {
  background: #3b82f6;
  color: white;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.step-label {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}

.step-item.active .step-label {
  color: #1e293b;
  font-weight: 600;
}

Projet : Page de cours avec listes avancées

Crée un fichier index.html et listes.css qui implémentent une page de cours utilisant différentes structures de listes :

HTML requis :

• Un <nav> avec un <ul> comme menu de navigation horizontal
• Un <main> contenant :
• Un <section class="sommaire"> — sommaire avec compteurs CSS
• Un <section class="features"> — liste de fonctionnalités avec icônes
• Un <section class="timeline"> — frise chronologique
• Un <section class="faq"> — 3 questions avec <details>/<summary>
• Un <footer> avec breadcrumb

CSS requis :

• Navigation : display: flex, list-style: none, gap, hover states
• Sommaire : compteur CSS avec counter() et ::before
• Features : ::before avec icônes ou compteurs
• Timeline : pseudo-élément ::before pour la ligne verticale, markers ronds
• FAQ : <details>/<summary> stylisés
• Breadcrumb : séparateurs avec ::after

Objectif : Démontrer la maîtrise des listes, compteurs CSS et sémantique HTML dans la création de composants UI variés.