Listes de définition collantes

Récemment, j'ai découvert le site Web de 30 secondes de code, et leurs exemples CSS sont vraiment impressionnants! J'ai été particulièrement captivé par leurs «en-têtes de section flottants» à l'aide de listes de définition. Cela démontre élégamment la puissance et la polyvalence de<dl></dl> ,<dt></dt> , et<dd></dd> Éléments.

Considérez ce simple HTML:

<div>
  <dl>
<dt>UN</dt>
    <dd>Algérie</dd>
    <dd>Angola</dd>

    <dt>B</dt>
    <dd>Bénin</dd>
    <dd>Botwana</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>Coté d'ivoire</dd>

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

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

Sans aucun CSS, le rendu par défaut du navigateur est simple. Cependant, la structure inhérente de<dt></dt> et<dd></dd> Permet un style intelligent. Remarquez comment le<dt></dt> Les éléments s'alignent naturellement sur la gauche en raison de la marge par défaut. Cela rend la création de "sections collantes" remarquablement faciles:

 dt {
  Position: collante;
  en haut: 0;
  Contexte: blanc;
  Affichage: bloc en ligne;
}

L'élégance de cette solution est frappante. La fonctionnalité principale est obtenue avec un CSS minimal. Le style supplémentaire est une amélioration purement cosmétique.

L'exemple de 30 secondes de code utilise la grille CSS pour une disposition plus robuste, mais cette approche CSS concise souligne la quantité qui peut être accomplie avec moins. Ils offrent également une variation où<dd></dd> Les éléments s'étendent sur toute la largeur, offrant une autre option de conception intéressante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!