Senarai definisi melekit

Baru -baru ini, saya dapati laman web 30 saat kod, dan contoh CSS mereka benar -benar mengagumkan! Saya sangat terpesona oleh "tajuk bahagian terapung" mereka menggunakan senarai definisi. Ini elegan menunjukkan kekuatan dan fleksibiliti<dl></dl> ,<dt></dt> , dan<dd></dd> unsur -unsur.

Pertimbangkan HTML sederhana ini:

<div>
  <dl>
<dt>A</dt>
    <dd>Algeria</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>Cameroon</dd>
    <dd>Republik Afrika Tengah</dd>
    <dd>Chad</dd>
    <dd>Comoros</dd>
    <dd>Congo, Republik Demokratik</dd>
    <dd>Congo, Republik</dd>
    <dd>Cote d'Ivoire</dd>

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

    <dt>E</dt>
    <dd>Mesir</dd>
    <dd>Guinea Khatulistiwa</dd>
    <dd>Eritrea</dd>
    <dd>Eswatini (dahulunya Swaziland)</dd>
    <dd>Ethiopia</dd>
  </dl>
</div>

Tanpa sebarang CSS, rendering lalai penyemak imbas adalah mudah. Walau bagaimanapun, struktur yang wujud<dt></dt> dan<dd></dd> membolehkan gaya pintar. Perhatikan bagaimana<dt></dt> Elemen secara semulajadi menyelaraskan ke kiri kerana margin lalai. Ini menjadikan "bahagian melekit" sangat mudah:

 dt {
  Kedudukan: melekit;
  Atas: 0;
  Latar Belakang: Putih;
  paparan: blok sebaris;
}

Keanggunan penyelesaian ini menarik. Fungsi teras dicapai dengan CSS yang minimum. Further styling is purely cosmetic enhancement.

Contoh kod 30 saat menggunakan grid CSS untuk susun atur yang lebih mantap, tetapi pendekatan CSS ringkas ini menyoroti berapa banyak yang dapat dicapai dengan kurang. Mereka juga menawarkan variasi di mana<dd></dd> Unsur -unsur menjangkau lebar penuh, menyediakan satu lagi pilihan reka bentuk yang menarik.

Atas ialah kandungan terperinci Senarai definisi melekit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!