Cara Membuat List Responsive dengan html CSS

Cara Menampilkan List Responsive diperlukan script html beserta cssnya karena kalau kita menggunakan html saja tampilan akan biasa biasa saja berikut ini cara membuat list responsive dari saya yang belajar dari w3 school hehehe:v

# Basic List :

1. Silahkan copy script di bawah ini dan simpan dengan format.html

2. lalu buka dengan browser yang anda miliki seperti google chrome,mozila dan lain-lain
3. hasilnya akan seperti berikut karena masih basic atau masih biasa

list dasar Cara Membuat List Responsive dengan html CSS di blog maupun website

# Bordered List:

4. Silahkan copy script di bawah ini dan simpan dengan format.html

5. lalu buka dengan browser yang anda miliki seperti google chrome,mozila dan lain-lain
6. hasilnya akan seperti berikut di masing masing list mempunyai border tersendiri

bordered list dasar Cara Membuat List Responsive dengan html CSS di blog maupun website

# List Header

7. Silahkan copy script di bawah ini dan simpan dengan format.html

8. lalu buka dengan browser yang anda miliki seperti google chrome,mozila dan lain-lain
9. hasilnya akan seperti berikut terdapat header yang bisa di buat judul list hehehe:v

cara membuat header list dengan html header list header listbox vba excel header list yang simpul terakhirnya menuding ke simpul header dari list tersebut disebut header listview header list html header list php header listview android header listview android example header list-unsubscribe header listbox vba header list css listview with header android listview header header list ionic list header android list header android studio sticky header list android header linked list adalah header of list html header with list sticky list header android example header user agent list a header linked list a. grounded header list add a header to listview android a header node of linked list header list bootstrap listbox header header list http listbox column header ion-list-header button ion-list-header background ionic list header button sharepoint list header bold ionic list header background color header list c++ list header component react native list header cpp header linked list c++ header file list c++ ion-list-header color header files in c list php header list of content-type header files list in c programming c header files list c header file list c header linked list c programming header files list c header files list and their functions c header files list pdf c header va_list c linked list header file all c header files list c header dateien liste header list definition header link list in data structure header list in data structure header linked list data structure header linked list definition header linked list diagram header in alv list display mvc header drop down list data frame header list header linked list in data structure in hindi header list examples list header email drop down list header excel android sticky list header example list header excel list header element header linked list example android list header example list header component example ion-list-header example e.item.itemtype == listitemtype.header list header file in c++ header file list header files list in c header for list html header for list in c++ header for list sharepoint list header freeze http header fields list list group header bootstrap list group header grounded header list golang header list file header list hex email header list-help html unordered list header header linked list in hindi gmime header_list to_string header.header_list http header list of content-type http header list value list header html5 header host list header link list html list.h header file header list in php header list in html header list in android header list ionic2 list header in c++ list header in bootstrap header linked list in c list header java header linked list java http header list java header node linked list java header files in java list jaws header list jms header list doubly linked list header java html5 list header html ordered list header cognos hide list header list unsubscribe header html header linked list header link list circular header linked list header node linked list header linked list in data structure ppt header list meaning zk multiline listheader list-unsubscribe email header header menu list header mailing-list header-menu__list-item cognos list header multiple rows sap.m.list header sap.m.list header toolbar linked list header node list header react native header name list r list header names ion-list-header ngfor ssrs list header not repeating ion-list-header not working header file list of c++ header files list of c header file of list list of header files in c programming list of header http header list of values proxy header list list header python list header pandas _list_header.php symfony header linked list program in c header linked list program inbound header_list property header linked list pdf p-listbox header qnetworkrequest header list q-list-header response header list sharepoint 2013 list header row freeze list header rows vba list header rows react native flatlist header cognos list header repeat excel list header row ion-list-header right r add header to list r remove header from list header list style list header sac freeze header sharepoint list ionic list header sticky http header status list ionic 2 list header sticky listview with section header in android header list types header to list header content type list android add header to listview dicom header tags list list the header files in c list header tag header tcn list pandas header to list add header to list python list-unsubscribe header phpmailer list-unsubscribe header postfix header ul list header linked list use list-unsubscribe header php list-unsubscribe header gmail list-unsubscribe header outlook header va_list sticky header listview android pinned header listview listview header footer v-ons-list-header header list where the last node points back to the header node ion-list-header with icon html header with list list with header android list with header bootstrap list with header css whitelist header http header list wiki http header list wikipedia xmlhttprequest header list header-drop down-list hidden-xs x-mailing-list header listheader zkoss list header zk ionic 1 list header list header in ionic 2 ionic 2 header list ionic 3 list header bootstrap 3 list header header for list in java bootstrap 4 list header

Dan sekarang kita akan membuat list responsive dengan css dengan cara berikut kita harus teliti agar tidak terjadi kesalahan atau error pada saat proses coding hehehe:v

# List Responsive CSS

1. Silahkan copy script di bawah ini dan simpan dengan format.html

<!DOCTYPE html><html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"><body> <div class="w3-container">
  <h2>
Avatar List</h2>
<p>
You can combine w3-ul and the w3-bar classes to create an avatar list:</p>
<ul class="w3-ul w3-card-4">
<li class="w3-bar">      <span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>      <img src="img_avatar2.png" class="w3-bar-item w3-circle w3-hide-small" style="width:85px">      <div class="w3-bar-item">
        <span class="w3-large">Muhamad</span><br>        <span>Web Designer</span>      </div>
</li>
<li class="w3-bar">      <span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>      <img src="img_avatar5.png" class="w3-bar-item w3-circle w3-hide-small" style="width:85px">      <div class="w3-bar-item">
        <span class="w3-large">Reizal</span><br>        <span>Support</span>      </div>
</li>
<li class="w3-bar">      <span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>      <img src="img_avatar6.png" class="w3-bar-item w3-circle w3-hide-small" style="width:85px">      <div class="w3-bar-item">
        <span class="w3-large">Muhaimin</span><br>        <span>Accountant</span>      </div>
</li>
</ul>
</div>
</body></html>

2. lalu buka dengan browser yang anda miliki seperti google chrome,mozila dan lain-lain
3. hasilnya akan seperti berikut terdapat header yang bisa di buat judul list hehehe:v

Anda bisa mengedit tampilan yaitu dengan mengganti nama gambar dan lain-lain tetapi dengan satu hal anda harus teliti dan cermat karena kalau kalian mengetikan script satu huruf salah akan terjadi error,jadi anda harus teliti dan cermat ,itu tips dari saya semoga bermanfaat

terima kasih telah membaca artikel saya dan semoga bermanfaat bagi anda !!!!