Quantcast
Channel: Kursus Website Terbaik
Viewing all articles
Browse latest Browse all 2170

Cara Membuat List dengan W3.CSS

$
0
0

Belajarlah menjadi lebih hebat dari “ORANG SUKSES”,dan belajar bersyukur dari Orang yang “KEKURANGAN”. Oke pada kesempatan kali ini saya akan share kepada teman-teman tentang bagaimana Cara Membuat List dengan W3.CSS.

List kurang lebih persis seperti table, tapi bedanya list ini tidak memiliki banyak, berbeda dengan table. List bisa dipakai untuk kumpulan judul artikel, atau daftar nama orang, ataupun daftar-daftar lain nya yang bisa dipakai dengan menggunakan list ini.
Penampakan nya seperti ini teman-teman:

Cara Membuat List dengan W3.CSS

Oke langsung saja, berikut Cara Membuat List dengan W3.CSS.

Seperti biasa, pertama-tama siapkan file index.html nya.

Kemudian, isi di bagian <head> link untuk 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? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat List dengan W3.CSS.

Semoga bermanfaat, terima kasih

The post Cara Membuat List dengan W3.CSS appeared first on Kursus Website Terbaik.


Viewing all articles
Browse latest Browse all 2170

Trending Articles