1. Ordered lists adalah daftar item yang ditandai dengan bentuk lingkaran kecil ataupun kotak kecil.
2. Unordered lists adalah daftar item yang ditandai dengan bentuk angka atau huruf.
3. 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> 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>3. Image lists
<style type="text/css">
ul.o {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVSSF5x7jKtbfvg_-ZJ9aCUsIiRgsX6JF0CEweOxl90654q_iBC0tASAHFqEDY3GTeAuuLZwBZUz_o1tcJbGVgEvdCwrqX8eU6LK3KSvnD7scQO44AJvTy7cujFWkj-hComYQ-ByyZ13ho/s104/List+1.jpg');}
ul.p {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUpPrrWnTjMXWUujJVCmpMYVyEQU3RSQzvpF1FcnAK7wl3ssRt6IrnKkC4sTiNNZZHb6GMvg-xuM4MrLFOdvFX27Xhkov1_UVbJvs0rVbzlmJWHO5bn_k9ccHUHWjOeMKXpfuIeShlbeFt/s104/List+2.jpg');}
ul.q {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwC4NpLQrLd3nR8KNx0VA5BbViqWzzSA2NNyygaduAk0ICd740eQJd8medBDBeorJe9qJbGS1mfKm8aB1ht3rfZl2PTlnp_-_RohGzCP1wCpl8zflNGmnJQnt5j700YA7mXliLZoFAbzzi/s104/List+3.jpg');}
ul.r {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxXImj-A2YNyRoiFQ2TDA7bHMqgVkC4nGgaufBNOjsCQkE0dsCMO7iZzb_Y9-NMCx0PmEFltAB_ScaMtEmoVZozOBIw2_DmOMFQyX4veoRoDWGVzCvq-bIxCAcvLHlYwO-ON2jkuOU_jTX/s104/List+4.jpg');}
ul.s {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Jw2aRVJQzCU7fEhGEhJi48Uxgmi35TcO4CP4gU6U_gVSdXTSVN_qgGHrCO3U4FUCc8uq7F-R8ShawZYK5R6nxwpYrZGY9L4Yvo5ssvT5XZSWyD6wI_pSIGHDABuPJgu_a0aMZ9-sw4Ni/s104/List+5.jpg';}
ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6rIN-EWwH0pkpomr8ogwu3jgJeWV512t1iIZOKXZkGTrsSud2JGgH-7VYXm38IHzVwV2nNWBEopIwdyObzXno0Vh2LFL5VyuxHmde98bL9yX7wlHXapCfKhvVuBtTo4QjajpSwFRQoF8/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>Silahkan anda ganti Ulr gambar List dengan Ulr gambar List milik anda.
Selamat mencoba dan Semoga artikel ini bermanfaat
link sumber: http://www.carabuatwebgratis.com