List-style memungkinkan kita untuk membuat atau memasang tanda / bullet pada setiap daftar post atau daftar-daftar lainnya.

Aturan yang di terapkan pada list-style adalah sebagai berikut :

Sebagai contoh :

Berikut berbagai list-style dan cara penerapannya:

A. list-style-type

1. none

Untuk menghilangkan tanda.

• ul{ list-style-type:none; }
• …
• …

2. circle

Untuk memberi tanda lingkaran.

• ul{ list-style-type:circle; }
• …
• …

3. disc

Untuk membuat tanda daftar berupa bola (default value).

• ul{ list-style-type:disc; }
• …
• …

4. decimal

Untuk membuat daftar dengan imbuhan nomor desimal.

• ul{ list-style-type:decimal; }
• …
• …
• …
• …
• …
• …
• …
• …
• …
• …

5. decimal-leading-zero

Untuk membuat daftar dengan imbuhan angka 0 (nol) untuk angka 1-9.

NB: Not working on Internet Explorer

• ul{ list-style-type:decimal-leading-zero; }
• …
• …
• …
• …
• …
• …
• …
• …
• …
• …

6. lower-roman

Untuk membuat daftar dengan tanda angka romawi kecil.

• ul{ list-style-type:lower-roman; }
• …
• …

7. upper-roman

Untuk membuat daftar dengan tanda romawi besar.

• ul{ list-style-type:upper-roman; }
• …
• …

8. lower-alpha

Untuk membuat daftar dengan tanda huruf kecil.

NB: Not Working on Internet Explorer

• ul{ list-style-type:lower-alpha; }
• …
• …

9. upper-alpha

Untuk membuat daftar dengan tanda huruf besar.

NB: Not supported by Internet Explorer

• ul{ list-style-type:upper-alpha; }
• …
• …

B. list-style-position

1. inside

Untuk memberi tanda pada teks sekaligus sebagai batas awal teks yang diletakkan disebelah kanan.

• ul{ list-style-position:inside; }
• …
• …

2. outside

Untuk memberi tanda yang secara default berada diluar teks.

• ul{ list-style-position:outside; }
• …
• …

3. list-style-image

1. url

Untuk membuat daftar dengan tanda gambar yang spesifik.

• ul{ list-style-image:url(list_style.jpg); }
• …
• …

2. none

Untuk menghapus gambar yang di apply pada kode diatas.

sekali dihapus, maka nilainya akan menjadi default.

• ul{ list-style-image:none; }
• …
• …

Silakan di coba-coba

Semoga berhasil.

Semoga bermanfaat.

Silakan, Langsung aja Klik DISINI untuk melihat demo Online nya.

Semoga berhasil.

Semoga bermanfaat.

Postingan hebat lainnya yang berhubungan :

1. Cara Membuat Transparansi Unsur dengan Opacity di CSS3
2. Cara Membuat Scrollbar Box Warna Dengan Bantuan CSS (style.css)
3. Cara Mudah Membuat Blinking Text Dengan Bantuan CSS Theme
4. Cara Membuat ScrollBar Box Dengan Isi Random Post
5. Cara Sangat Mudah Membuat Post Thumbnail Dengan Timthumb
6. Cara Membuat Menu Hierarki (Menu-Submenu) Pada Mesin WordPress
7. Cara Menampilkan Postingan Dengan Category Tertentu Didalam ScrollBar Box
8. Cara Membuat atau Memberi Password Pada Outlook Express