Bagaimanakah Saya Boleh Mencipta Titik Utama dalam CSS untuk Jadual Kandungan?

Mencipta Titik Utama dalam CSS

Dalam bidang reka bentuk web, selalunya perlu memaparkan titik utama dalam jadual kandungan untuk membimbing mata pembaca. Satu kaedah yang berkesan untuk mencapai perkara ini menggunakan CSS dibentangkan dalam pautan yang disediakan: https://www.w3.org/Style/Examples/007/leaders.en.html.

Inilah coretan CSS:

ul.leaders {
  max-width: 40em;
  padding: 0;
  overflow-x: hidden;
  list-style: none;
}

ul.leaders li:before {
  float: left;
  width: 0;
  white-space: nowrap;
  content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
}

ul.leaders span:first-child {
  padding-right: 0.33em;
  background: white;
}

ul.leaders span + span {
  float: right;
  padding-left: 0.33em;
  background: white;
}

Penyelesaian CSS ini menggunakan teknik yang dipanggil "tinju watak" untuk memaparkan titik tanpa sebarang imej atau kebergantungan lain. Dengan menggunakan satu siri aksara ruang putih yang dipisahkan oleh titik sebagai kandungan unsur pseudo, ia mewujudkan ilusi titik utama di sebelah kiri item senarai. Selain itu, CSS menggunakan latar belakang putih pada rentang anak pertama dan semua rentang berikutnya untuk memisahkannya secara visual.

Dengan melaksanakan CSS ini dalam projek anda, anda boleh membuat jadual kandungan dengan titik utama yang bersih dan seragam, meningkatkan keseluruhan kebolehbacaan dan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Titik Utama dalam CSS untuk Jadual Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!