tutorial pengembangan web terbaru
 

W3.CSS daftar


Menampilkan Daftar suatu

  • × mikropon
    Desainer web
  • × Jill
    Mendukung
  • × Jane
    Akuntan

Daftar dasar

  • Jill
  • Malam
  • Adam

Contoh

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

Daftar berbatasan

  • Jill
  • Malam
  • Adam

Contoh

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

Daftar Tajuk

  • 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>
Cobalah sendiri "

Daftar sebagai Kartu

  • Jill
  • Malam
  • Adam

Contoh

<ul class="w3-ul w3-card-4">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Cobalah sendiri "

Daftar berpusat

  • Jill
  • Malam
  • Adam

Contoh

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

berwarna Daftar

  • Jill
  • Malam
  • Adam

Contoh

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

Berwarna Daftar Barang

  • Jill
  • Malam
  • Adam

Contoh

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

daftar Hoverable

Kelas w3-hoverable menambahkan warna latar belakang abu-abu untuk setiap item daftar pada mouse-over:

  • Jill
  • Malam
  • Adam

Contoh

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

Jika Anda ingin warna melayang-layang tertentu, menambahkan salah satu dari w3-melayang-kelas untuk masing-masing <li> elemen:

  • Jill
  • Malam
  • Adam

Contoh

<li class="w3-hover-red">Jill</li>
Cobalah sendiri "

daftar closable

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

  • Jill x
  • Adam x
  • Eve x

Contoh

<li>Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Cobalah sendiri "

Daftar empuk

  • Jill
  • Malam
  • Adam
  • Jill
  • Malam
  • Adam

Contoh

<ul class="w3-ul">
  <li class="w3-padding-hor-16">Jill</li>
  <li class="w3-padding-hor-16">Eve</li>
  <li class="w3-padding-hor-16">Adam</li>
</ul>
Cobalah sendiri "

Daftar Avatar

  • x mikropon
    Desainer web
  • x Jill
    Mendukung
  • x Jane
    Akuntan

Contoh

<ul class="w3-ul w3-card-4">
  <li class="w3-padding-hor-16">
    <span onclick="this.parentElement.style.display='none'"
    class="w3-closebtn w3-padding">x</span>
    <img src="img_avatar2.png" class="w3-left w3-circle" style="width:60px">
    <span class="w3-xlarge">Mike</span><br>
    <span>Web Designer</span>
  </li>
</ul>
Cobalah sendiri "

Daftar kecil

  • Jill
  • Malam
  • Adam

Contoh

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

Daftar kecil

  • Jill
  • Malam
  • Adam

Contoh

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

Daftar besar

  • Jill
  • Malam
  • Adam

Contoh

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

XLarge Daftar

  • Jill
  • Malam
  • Adam

Contoh

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

XXLarge Daftar

  • Jill
  • Malam
  • Adam

Contoh

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

XXXLarge Daftar

  • Jill
  • Malam
  • Adam

Contoh

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

Daftar jumbo

  • Jill
  • Malam
  • Adam

Contoh

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