Cara Membuat List dengan W3.CSS
Belajarlah menjadi lebih hebat dari “ORANG SUKSES”,dan belajar bersyukur dari Orang yang “KEKURANGAN”. Oke di kesempatan kali ini saya akan share kepada teman-teman mengenai bagaimana Cara Merancang List dengan W3.CSS.
List kurang lebih persis seperti table, tapi bedanya list ini tak mempunyai banyak, berbeda dengan table. List dapat diaplikasikan bagi kumpulan judul artikel, atau daftar nama orang, ataupun daftar-daftar lain nya yang dapat diaplikasikan dengan menggunakan list ini.
Penampakan nya seperti ini teman-teman:
Oke seketika saja, berikut Cara Merancang List dengan W3.CSS.
Seperti biasanya, pertama-tama siapkan file index.html nya.
Kemudian, isi di bagian <head> link bagi menghubungkan HTML kita dengan library W3.CSS nya.
<link rel=stylesheet href=http://www.w3schools.com/lib/w3.css>
Setelah itu isi di bagian <body> tag-tag seperti gambar di bawah.
<body class=w3-container>
<h2>List</h2>
<ul class=w3-ul w3-card-4>
<li class=w3-padding-16>
<span onclick=this.parentElement.style.display='none'
class=w3-closebtn w3-padding w3-margin-right w3-medium>x</span>
<img src=img_avatar2.png class=w3-left w3-circle w3-margin-right style=width:60px>
<span class=w3-xlarge>Mike</span><br>
<span>Web Designer</span>
</li>
<li class=w3-padding-16>
<span onclick=this.parentElement.style.display='none'
class=w3-closebtn w3-padding w3-margin-right w3-medium>x</span>
<img src=img_avatar5.png class=w3-left w3-circle w3-margin-right style=width:60px>
<span class=w3-xlarge>Jill</span><br>
<span>Support</span>
</li>
<li class=w3-padding-16>
<span onclick=this.parentElement.style.display='none'
class=w3-closebtn w3-padding w3-margin-right w3-medium>x</span>
<img src=img_avatar6.png class=w3-left w3-circle w3-margin-right style=width:60px>
<span class=w3-xlarge>Jane</span><br>
<span>Accountant</span>
</li>
</ul>
</body>
Bagaimana teman-teman? Lumayan gampang bukan?
Demikian bagi panduan kali ini mengenai Cara Merancang List dengan W3.CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
