Untuk membuat penampilan lebih menarik, kita dapat menggunakan list dengan gambar/image. Dalam CSS kita dapat melakukannya dengan property list-style-image. Kemudian ada juga property list-style-position untuk menentukan posisi image.
Untuk contohnya dapat dilihat coding berikut ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>List Style Image</title>
<style type=”text/css”>
.gambar_luar
{
list-style-image: url(‘images/panah.gif’);
list-style-position: outside;
}
.gambar_dalam
{
list-style-image: url(‘images/panah.gif’);
list-style-position: inside;
}
ul
{
margin-top: 1px;
}
</style>
</head>
<body>
Skill yang harus dikuasai marketing:
<ul class=”gambar_luar”>
<li>Interpersonal skill</li>
<li>Negoitation skill</li>
<li>Management skill</li>
</ul>
Skill yang harus dikuasai programmer:
<ul class=”gambar_dalam”>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ul>
</body>
</html>
Hasilnya bisa dilihat di http://aris.proweb.asia/list_style_image.html dengan tampilan seperti gambar di bawah ini:
Pada contoh di atas , yang pertama (skill marketing) menggunakan list-style-position:outside,
sedangkan kedua (skill programmer) menggunakan list-style-position: inside.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.