粘着性の定義リスト

尊渡假赌尊渡假赌尊渡假赌
リリース: 2025-03-18 11:55:24
オリジナル
369 人が閲覧しました

粘着性の定義リスト

最近、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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート