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