Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

kategori CSS
oylama 3.1/5 yorum 0 yorum yazar 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;}

 

onizleme

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

Bu makale için yorum yazılmamış