Cara Mempercantik List Pada Menu Menggunakan List-Style-Image

Di beberapa orang amat tak suka dengan list di fitur yang terkesan selaku hingga yang bulet seperti benalu yang selalu mengikuti, padahal tak kita inginkan bagi kehadirannya, kali ini kita akan mempergunakan fitur listt di li yang bulet itu menjadi style yang menarik, menarik bagi di lihat dan menarik bagi kita pelajari, di situs situs modern telah banyak fitur fitur yang menggunakan fitur ini agar terlihat mewah dan modern pastinya



dan selaku animasi yang pasif dan menarik bagi situs kita, walau terkesan norak tapi banyak situs situs yang telah mengaplikasikan ini, balik lagi ke kitanya bagaimana kita membangun sebuah hal kecil menjadi bahan yang menarik bagi dilihat oleh user, dan user friendly pastinya, sebelum kita masuk di pembahasan mengenai Bagimana Cara Mempercantik List Di Fitur Menggunakan List-Style-Image teman teman telah diluar kepala yang pada pemakaian ul li a bagi membangun sebuah link atau fitur, sekiranya semuanya telah diluar kepala, tetapi sekiranya teman teman yang masih baru tenang saja saya akan pandu dengan bagus, oke lumayan yah intronya, teman teman tak usah pusing dan tak banyak script pun bagi membuatnya, hanya perlu beberapa saja ehehe, oke teman teman dapat salinkan scriptnya dibawah sini yah .



<nav>

<ul>
<li><a href= class=merah>Lorem ipsum</a></li>
<li><a href= class=kuning>dolor sit amet</a></li>
<li><a href= class=hijau>dolor sit amet lorem</a></li>
<li><a href= class=biru>dolor sit amet lorem tex damy</a></li>
</ul>
</nav>


style.css



nav{border:11px dotted blue; width: 400px; margin: auto; padding: 20px}
ul li {list-style :inside;
list-style-image:url(https://www.purplecarrot.com/assets/icons/success-icon-a3b15ad932f9b8fdaf1b2dd88b8a5093.png);}
.merah {font-size:25px; color: red; text-decoration:none}
.kuning {font-size:25px; color: yellow; text-decoration:none}
.hijau {font-size:25px; color: green; text-decoration:none}
.biru {font-size:25px; color: blue; text-decoration:none}


Jikalau telah disave dan jalankan dibrowsernya, lumayan gampang bukan? Lumayan menarik yah, bagi temanteman yang mempunya kreatifitas yang tinggi teman teman dapat devlopnya dengan bagus, saya ajarkan ini hanya bagi sebuah sekilas saja, oke lumayan sekianlah panduan mengenai Bagaimana Cara Mempercantik List Di Fitur Menggunakan List-Style-Image. hingga betemu diartikel berikutnya dan hingga jumpa.



bagi melihat klik DEMO



#KeepLearn



#IsmetMA




Sumber https://kursuswebsite.org

Popular posts from this blog

Membuat Form Menarik Menggunakan HTML dan CSS

Cara Menghapus Isi Dari Form Input Menggunakan Javascript