deZige

Macam Lists Style Unordered dan Ordered (Numbering)

Macam dan jenis list style type Unordered dan Ordered (numbering) list yang bisa dipergunakan untuk web/blog dengan berbagai pilihan nilai.

Macam Lists Style Unordered dan Ordered (Numbering)

Macam Lists Style Unordered dan Ordered (Numbering) - Satu dari sekian banyak macam list style kita pergunakan pada sebuah list artikel blog, baik jenis Unordered, Ordered (numbering) atau list style berupa gambar (image). Dari banyaknya jenis list style yang ada tidak semua jenis list dapat dibaca dengan baik oleh browser, terutama Internet Explorer.

Untuk kedepannya seiring perkembangan teknologi browser, mudah-mudahan semua browser bisa support untuk semua jenis List Style.

Dibawah ini, beberapa macam lists style yang bisa dipergunakan pada artikel blog atau dipergunakan pada bagian-bagian lain.

Macam Nilai Properti List Style


UnorderedOrdered/NumberingOrdered Not Support IE 9 dan Opera 12
disclower-romancjk-ideographic
circleupper-romanhebrew
squarelower-alphahiragana
noneupper-alphahiragana-iroha
lower-latinkatana
upper-latinkatana-iroha
decimal
decimal-leading-zero
lower-greek
armenian
georgian

Cara Penggunaan


CSS
ul {
  list-style-type:square;     /* untuk unordered lists */
}

atau

ol {
  list-style-type:upper-alpha;     /* untuk ordered lists */
}

HTML
<ul>
<li>unordered lists 1</li>
<li>unordered lists 2</li>
<li>unordered lists 3</li>
</ul>

atau

<ol>
<li>ordered lists 1</li>
<li>ordered lists 2</li>
<li>ordered lists 3</li>
</ol>

Secara spesifik list style, bisa pergunakan untuk bagian-bagian tertentu dengan memberikan nilai list style yang berbeda, sebagai contoh untuk list style bagian sidebar dan lists style bagian posting (.post-body).

Penulisan css pada template adalah:

#sidebar ul atau #sidebar ol {
  list-style-type:...;     /* ... isi dengan jenis list yang akan dipergunakan */
}

.post-body ul atau .post-body ol {
  list-style-type:...;     /* ... isi dengan jenis list yang akan dipergunakan */
}


Semoga mudah untuk dipahami.

No comments:

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin

Kontak SosMed

.
deZige