CSS Listenin Her Madde İşaretinde Farklı Resim Kullanmak

3/5

0 yorum

Hakan Taşan tarih

21 Temmuz 2014

Daha önce CSS ile Liste Biçimlendirme ve HTML ile Liste Oluşturma makalelerinde öğrendiğimiz bilgileri bu makalede pekiştireceğiz. Madde işaretlerini değiştirip resim yapmayı öğrenmiştik ve şimdi her resmin farklı olmasını istiyorsak ne yapacağımızı öğreneceğiz. Elde edeceğimiz liste aşağıdaki gibi olacak.

HTML Kodu

<ul>
    <li class="ie">Internet Explorer</li>
    <li class="chrome">Chrome</li>
    <li class="opera">Opera</li>
    <li class="firefox">Firefox</li>
    <li class="safari">Safari</li>
</ul>

CSS Kodu

ul{list-style:none;}
li
{
    padding-left:20px;      
    margin:10px 0;
    background-position:0 50%;
}
li.ie{background:url(ie.png) no-repeat;}
li.chrome{background:url(chrome.png) no-repeat;}
li.opera{background:url(opera.png) no-repeat;}
li.firefox{background:url(firefox.png) no-repeat;}
li.safari{background:url(safari.png) no-repeat;}