Sticky Definition Listen

Vor kurzem habe ich die 30 Sekunden der Code -Website entdeckt und ihre CSS -Beispiele sind wirklich beeindruckend! Ich war besonders fasziniert von ihren "schwimmenden Abschnittsüberschriften" unter Verwendung von Definitionslisten. Dies zeigt elegant die Kraft und Vielseitigkeit von<dl></dl> Anwesend<dt></dt> , Und<dd></dd> Elemente.

Betrachten Sie diese einfache HTML:

<div>
  <dl>
<dt>A</dt>
    <dd>Algerien</dd>
    <dd>Angola</dd>

    <dt>B</dt>
    <dd>Benin</dd>
    <dd>Botswana</dd>
    <dd>Burkina Faso</dd>
    <dd>Burundi</dd>

    <dt>C</dt>
    <dd>Cabo Verde</dd>
    <dd>Kamerun</dd>
    <dd>Zentralafrikanische Republik</dd>
    <dd>Tschad</dd>
    <dd>Komoros</dd>
    <dd>Kongo, Demokratische Republik der</dd>
    <dd>Kongo, Republik der</dd>
    <dd>Cote d'Ivoire</dd>

    <dt>D</dt>
    <dd>Dschibuti</dd>

    <dt>E</dt>
    <dd>Ägypten</dd>
    <dd>Äquatorialguinea</dd>
    <dd>Eritrea</dd>
    <dd>Eswatini (ehemals Swasiland)</dd>
    <dd>Äthiopien</dd>
  </dl>
</div>

Ohne CSS ist das Standardtrending des Browsers unkompliziert. Die inhärente Struktur von jedoch<dt></dt> Und<dd></dd> ermöglicht ein cleveres Styling. Beachten Sie, wie das<dt></dt> Die Elemente sind aufgrund des Standardrandes auf natürliche Weise nach links ausgerichtet. Dies macht das Erstellen von "klebrigen Abschnitten" bemerkenswert einfach:

 dt {
  Position: klebrig;
  Top: 0;
  Hintergrund: weiß;
  Anzeige: Inline-Block;
}

Die Eleganz dieser Lösung ist auffällig. Die Kernfunktionalität wird mit minimalem CSS erreicht. Weiteres Styling ist eine rein kosmetische Verbesserung.

In den 30 Sekunden des Code -Beispiels wird CSS -Netz für ein robusteres Layout verwendet. Dieser prägnante CSS -Ansatz zeigt jedoch, wie viel mit weniger erreicht werden kann. Sie bieten auch eine Variation wo<dd></dd> Elemente umfassen die volle Breite und bieten eine weitere interessante Designoption.

Das obige ist der detaillierte Inhalt vonSticky Definition Listen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!