粘着性の定義リスト

最近、30秒のコードWebサイトを発見しましたが、CSSの例は本当に印象的です！私は特に、定義リストを使用して彼らの「フローティングセクションヘッダー」に魅了されました。これは、の力と汎用性をエレガントに示しています<dl></dl>、<dt></dt> 、 そして<dd></dd>要素。

この単純なHTMLを考えてみましょう：

<div>
  <dl>
<dt>a</dt>
    <dd>アルジェリア</dd>
    <dd>アンゴラ</dd>

    <dt>b</dt>
    <dd>ベニン</dd>
    <dd>ボツワナ</dd>
    <dd>ブルキナファソ</dd>
    <dd>ブルンジ</dd>

    <dt>c</dt>
    <dd>カボヴェルデ</dd>
    <dd>カメルーン</dd>
    <dd>中央アフリカ共和国</dd>
    <dd>チャド</dd>
    <dd>コモロ</dd>
    <dd>コンゴ、民主共和国</dd>
    <dd>コンゴ、共和国</dd>
    <dd>Cote D'Ivoire</dd>

    <dt>d</dt>
    <dd>djibouti</dd>

    <dt>e</dt>
    <dd>エジプト</dd>
    <dd>赤道ギニア</dd>
    <dd>エリトリア</dd>
    <dd>Eswatini（旧スワジランド）</dd>
    <dd>エチオピア</dd>
  </dl>
</div>

CSSがなければ、ブラウザのデフォルトレンダリングは簡単です。ただし、の固有の構造<dt></dt>そして<dd></dd>巧妙なスタイリングを可能にします。方法に注意してください<dt></dt>デフォルトのマージンのため、要素は自然に左に揃っています。これにより、「粘着性セクション」の作成が非常に簡単になります。

 dt {
  位置：粘着性;
  上：0;
  背景：白。
  ディスプレイ：インラインブロック。
}

このソリューションの優雅さは印象的です。コア機能は、最小限のCSSで達成されます。さらなるスタイリングは、純粋に美容強化です。

30秒のコード例では、より堅牢なレイアウトのためにCSSグリッドを採用していますが、この簡潔なCSSアプローチは、より少ない量で達成できる量を強調しています。彼らはまた、バリエーションを提供します<dd></dd>要素は全幅に及び、別の興味深いデザインオプションを提供します。

以上が粘着性の定義リストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。