CSS LIST

Seperti halnya HTML List, fitur css List juga berfungsi untuk membuat sebuah List atau tanda pada daftar. Dalam hal ini ada tiga macam bentuk yang bisa kita gunakan yaitu :

• Ordered lists adalah daftar item yang ditandai dengan bentuk lingkaran kecil ataupun kotak kecil.

• Unordered lists adalah daftar item yang ditandai dengan bentuk angka atau huruf.

• Image lists adalah daftar item yang ditandai dengan bentuk gambar.

1. Ordered lists

<style type="text/css">
ul.a {list-style-type:disc;}
ul.b {list-style-type:circle;}
ul.c {list-style-type:square;}
</style>

<ul class="a">
<li>Bentuk lingkaran</li>
<li>Lingkaran kecil</li>
<li>Lingkaran blok</li>
</ul>

<ul class="b">
<li>Bentuk lingkaran</li>
<li>Lingkaran kecil</li>
<li>Lingkaran lubang</li>
</ul>

<ul class="c">
<li>Bentuk kotak</li>
<li>Kotak kecil</li>
<li>Kotak blok</li>
</ul>

Berikut hasilnya :

• Bentuk lingkaran
• Lingkaran kecil
• Lingkaran blok

• Bentuk lingkaran
• Lingkaran kecil
• Lingkaran lubang

• Bentuk kotak
• Kotak kecil
• Kotak blok

2. Unordered

<style type="text/css">
ol.e {list-style-type:decimal;}
ol.f {list-style-type:decimal-leading-zero;}
ol.g {list-style-type:lower-roman;}
ol.h {list-style-type:upper-roman;}
ol.i {list-style-type:lower-alpha;}
ol.j {list-style-type:upper-alpha;}
ol.k {list-style-type:lower-greek;}
ol.l {list-style-type:armenian;}
ol.m {list-style-type:georgian;}
</style>

<ol class="e">
<li>Bentuk angka</li>
<li>Bentuk angka</li>
<li>Bentuk angka</li>
</ol>

<ol class="f">
<li>Bentuk angka dg Nol didepannya</li>
<li>Bentuk angka dg Nol didepannya</li>
<li>Bentuk angka dg Nol didepannya</li>
</ol>

<ol class="g">
<li>Bentuk huruf romawi kecil</li>
<li>Bentuk huruf romawi kecil</li>
<li>Bentuk huruf romawi kecil</li>
</ol>

<ol class="h">
<li>Bentuk huruf romawi besar</li>
<li>Bentuk huruf romawi besar</li>
<li>Bentuk huruf romawi besar</li>
</ol>

<ol class="i">
<li>Bentuk huruf abjad kecil</li>
<li>Bentuk huruf abjad kecil</li>
<li>Bentuk huruf abjad kecil</li>
</ol>

<ol class="j">
<li>Bentuk huruf abjad besar</li>
<li>Bentuk huruf abjad besar</li>
<li>Bentuk huruf abjad besar</li>
</ol>

<ol class="k">
<li>Bentuk simbol 1</li>
<li>Bentuk simbol 1</li>
<li>Bentuk simbol 1</li>
</ol>

<ol class="l">
<li>Bentuk simbol 2</li>
<li>Bentuk simbol 2</li>
<li>Bentuk simbol 2</li>
</ol>

<ol class="m">
<li>Bentuk simbol 3</li>
<li>Bentuk simbol 3</li>
<li>Bentuk simbol 3</li>
</ol>

Berikut hasilnya :

1. Bentuk angka
2. Bentuk angka
3. Bentuk angka

1. Bentuk angka dg Nol didepannya
2. Bentuk angka dg Nol didepannya
3. Bentuk angka dg Nol didepannya

1. Bentuk huruf romawi kecil
2. Bentuk huruf romawi kecil
3. Bentuk huruf romawi kecil

1. Bentuk huruf romawi besar
2. Bentuk huruf romawi besar
3. Bentuk huruf romawi besar

1. Bentuk huruf abjad kecil
2. Bentuk huruf abjad kecil
3. Bentuk huruf abjad kecil

1. Bentuk huruf abjad besar
2. Bentuk huruf abjad besar
3. Bentuk huruf abjad besar

1. Bentuk simbol 1
2. Bentuk simbol 1
3. Bentuk simbol 1

1. Bentuk simbol 2
2. Bentuk simbol 2
3. Bentuk simbol 2

1. Bentuk simbol 3
2. Bentuk simbol 3
3. Bentuk simbol 3

3. Image lists

<style type="text/css">

ul.o {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCnssfInOcapZJ3vZgplsnXNe_uOkU_wFk-L_tK6oJNvPPj_3v2WGStExPVeHJddNEkItoeTgIqordku-haLqHqB-9zXjrHlrd1-g-BuF4NQJlwiUE_Kh0bRjt37j9jJ36w8SRe3ZmWcj/s104/List+1.jpg');}

ul.p {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3SvkqW0OWZ1EnqVFcJWa5YEO0xqHSMhEsDzC5Lg8M6Hx7-J25UYsx_hvhN-TXdMP4HLXX5HMVtEX1vMlydgNAIE7ZrROmHoNXrobS4yyxgPQrV8wPLp4FPE1Ia4jJvskpWuQA8cRvJ63M/s104/List+2.jpg');}

ul.q {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ4b11RWzM3VwZEPC-AZjGDhVVOMRxl8M3WfXh9YfGjp6n7jsRL4HrLUqWF1wZbsdphWBsi_3LvpVjnhDsC9K1HxKHYrhgVya9Gvovc4yokFLnz2gaOY6YRinR8ax5PaUqQnrLDkW2h6ZK/s104/List+3.jpg');}

ul.r {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtom2bvFFzKacmTlkxI3THPvhEVZay3WapTJvMsFj9_o7bJ81JeIdXMtNkPlkkiMWZEg9UcSNf4LKyrfTO2AvX2XULZPBD14TT-NJdtHQT9ptdSrAErhvuk3Cb7XjKqSBxxiuLRyz2KaCy/s104/List+4.jpg');}

ul.s {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizMT4Ce4ghYmn9HlDNsDZ-13m9Xr3ImEKCv-kuHO9NyCuiAaC59pLaC8lQ6UDMrBkT7qFY7-7STXlrsJ1ygCLxz09b_PLH1HKCmFsvGpDri627_zZKt-JdrcJiwzmym-miRYghCcLLiZPd/s104/List+5.jpg');}

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKn_kohqb6eFrwst1upLNc9ZqQThnK2e9K3vdSdR4QyXRlZETLSApQnPsN1l_j54OX0JLYkAbTQXi3OfmrHrf0PlaJJHv_9fa51wEL_fHQz4pEUDlTRZC0LsaHUR1uegCgW4qF3DhsRCS/s104/List+6.jpg');}

</style>

<ul class="o">
<li>Bentuk gambar 1</li>
<li>Bentuk gambar 1</li>
<li>Bentuk gambar 1</li>
</ul>

<ul class="p">
<li>Bentuk gambar 2</li>
<li>Bentuk gambar 2</li>
<li>Bentuk gambar 2</li>
</ul>

<ul class="q">
<li>Bentuk gambar 3</li>
<li>Bentuk gambar 3</li>
<li>Bentuk gambar 3</li>
</ul>

<ul class="r">
<li>Bentuk gambar 4</li>
<li>Bentuk gambar 4</li>
<li>Bentuk gambar 4</li>
</ul>

<ul class="s">
<li>Bentuk gambar 5</li>
<li>Bentuk gambar 5</li>
<li>Bentuk gambar 5</li>
</ul>

<ul class="t">
<li>Bentuk gambar 6</li>
<li>Bentuk gambar 6</li>
<li>Bentuk gambar 6</li>
</ul>

Berikut hasilnya :

• Bentuk gambar 1
• Bentuk gambar 1
• Bentuk gambar 1

• Bentuk gambar 2
• Bentuk gambar 2
• Bentuk gambar 2

• Bentuk gambar 3
• Bentuk gambar 3
• Bentuk gambar 3

• Bentuk gambar 4
• Bentuk gambar 4
• Bentuk gambar 4

• Bentuk gambar 5
• Bentuk gambar 5
• Bentuk gambar 5

• Bentuk gambar 6
• Bentuk gambar 6
• Bentuk gambar 6

Catatan :

Silahkan anda ganti Ulr dengan Ulr milik anda.

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Anda sedang membaca artikel tentang CSS LIST dan anda bisa menemukan artikel CSS LIST ini dengan url http://wanzbsc.blogspot.com/2011/12/css-list.html. Anda boleh menyebarluaskan atau mengcopy artikel CSS LIST ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.