HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Daftar W3.CSS

❮ Sebelumnya Berikutnya ❯
  • ×
    Desainer Web Mike
  • ×
    Dukungan Jill
  • ×
    Jane
    Akuntan

Daftar Dasar

Kelas w3-ul digunakan untuk menampilkan daftar dasar:

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Daftar Berbatasan

Kelas w3-border menambahkan batas di sekitar daftar:

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Daftar Tajuk

Contoh cara menambahkan elemen heading di dalam item daftar:

  • Nama-nama

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-border">
  <li><h2>Names</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Daftar sebagai Kartu

Kelas nomor kartu-w3 dapat digunakan untuk menampilkan daftar sebagai kartu:

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-card-4" style="width:50%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Daftar Terpusat

Kelas w3-center dapat digunakan untuk memusatkan item daftar dalam daftar:

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Daftar Berwarna

Kelas warna w3- dapat digunakan untuk menambahkan warna ke daftar:

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Item Daftar Berwarna

Kelas warna w3- dapat digunakan untuk menambahkan warna ke item daftar:

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Daftar yang Dapat Dilayangkan

Kelas w3-hoverable menambahkan warna latar belakang abu-abu ke setiap item daftar saat mouse-over:

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Jika Anda menginginkan warna hover tertentu, tambahkan salah satu kelas warna w3-hover- ke setiap elemen <li>:

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul">
  <li class="w3-hover-red">Jill</li>
  <li class="w3-hover-blue">Eve</li>
  <li class="w3-hover-green">Adam</li>
</ul>

Item Daftar yang Dapat Ditutup

Klik pada "x" untuk menutup/menyembunyikan item daftar:

  • Jill×
  • Adam×
  • malam×

Contoh

<li class="w3-display-container">Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-right">&times;</span>
</li>

Tip: HTML × entitas adalah ikon pilihan untuk tombol tutup (bukan huruf "X").

Daftar Dengan Padding

Kelas w3-padding dapat digunakan untuk menambahkan padding ke item daftar: 

  • Jill
  • malam
  • Adam
  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul">
  <li class="w3-padding-small">Jill</li>
  <li class="w3-padding-small">Eve</li>
  <li class="w3-padding-small">Adam</li>
</ul>

Daftar Avatar

  • ×
    Desainer Web Mike
  • ×
    Dukungan Jill
  • ×
    Jane
    Akuntan

Contoh

<li class="w3-bar">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-bar-item w3-button w3-xlarge w3-right">&times;</span>
  <img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
  <div class="w3-bar-item">
    <span class="w3-large">Mike</span><br>
    <span>Web Designer</span>
  </div>
</li>

Tip: Anda akan mempelajari lebih lanjut tentang kelas bilah w3 di bab Bilah W3.CSS dan Navigasi W3.CSS kami .

Daftar Lebar

Daftar memiliki lebar 100% secara default. Gunakan properti lebar untuk mengubah ini.

Contoh

<ul class="w3-ul" style="width:30%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

30% lebar:

  • Jill
  • Adam

50% lebar:

  • Jill
  • Adam

80% lebar:

  • Jill
  • Adam

Daftar Kecil

Gunakan kelas w3-tiny untuk menampilkan daftar kecil: 

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Daftar Kecil

Gunakan kelas w3-small untuk menampilkan daftar kecil:  

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Daftar Besar

Gunakan kelas w3-besar untuk menampilkan daftar besar: 

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Daftar XLbesar

Gunakan kelas w3-xlarge untuk menampilkan daftar ekstra besar:  

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

XXXDaftar Besar

Gunakan kelas w3-xxlarge untuk menampilkan daftar XXLarge:  

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

XXXDaftar Besar

Gunakan kelas w3-xxxlarge untuk menampilkan daftar XXXLarge:  

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Daftar Jumbo

Gunakan kelas w3-jumbo untuk menampilkan daftar "jumbo" yang sangat besar:  

  • Jill
  • malam
  • Adam

Contoh

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

❮ Sebelumnya Berikutnya ❯