Membuat Daftar List menggunakan CSS

Jika anda orang yang suka membuat daftar (lists), CSS juga memiliki sesuatu untuk anda. Dua properties yang mengijinkan anda untuk mengubah tampilan dari item-item pada penanda daftar anda. Pertama

sekali, kita harus mengetahui properti “list-style-type”, yang menerima nilai “disc”, “circle”, square”, “decimal”, “lower-roman”, “upper-roman”, “lower-alpha”, “upper-alpha” atau “none”. Lihat Contoh :

Membuat Daftar List menggunakan CSS
 <HTML>
<HEAD><TITLE>LEGI</TITLE></HEAD>
<STYLE TYPE="text/css"> LI {list-style-type: square}
</STYLE>
 <BODY>
<h3>[[ Daftar Belanja ]]</h3>
<OL>
<LI>Jeruk 1 Kg.
<LI>Ikan Asin Rebung 2 Kg.
<LI>Beras 2 Goni Plastik Besar 60 Kg.
<LI>Bayam 4 Ikat
<LI>Mie Instant 4 Kardus
</OL>
</BODY>
</HTML>

Baca juga :
Belajar Struktur dan kode HTML dasar. Untuk pemula
Belajar Element FORM pada HTML
Cara mudah belajar Tag Hyperlink di HTML
Belajar Tag dan Element Frameset sederhana pada HTML
Kumpulan Desain dan Script Frameset pada HTML

Anda  dapat juga menggunakan suatu image/gambar biasa selain menggunakan  bullet, circle dan disc default dengan properti “list-style-image” Coba lihat ini :

Membuat Daftar List menggunakan CSS

<HTML>
<HEAD><TITLE>LEGI</TITLE></HEAD>
<STYLE TYPE="text/css">
LI {list-style-image: url("http://www.situs.com/bunga.gif" )}
</STYLE>
<BODY>
<h3>[[ Daftar Belanja ]]</h3>
<OL>
<LI>Jeruk 1 Kg.
<LI>Ikan Asin Rebung 2 Kg.
<LI>Beras 2 Goni Plastik Besar 60 Kg.
<LI>Bayam 4 Ikat
<LI>Mie Instant 4 Kardus
</OL>
</BODY>
</HTML>

Mohon Diperhatikan dan jangan protes, Browser Netscape Navigator tidak mendukung properties di atas.

0 komentar:

Post a Comment