Bu tagların ozelliği ise kod kalabalığı yapmıyor orn. bir oyun sitesinde son on oyunları div class lar ile cercevelersek en az 5 satır kod olacakken
ul li ile yaparsak sadece şu kodlar kullanılacaktır
Birde bu donguyu sorguya soktum mu tadından yenmiyor… : )
Her neyse başka ne gibi avantajları var derseniz bu aralar baya bi jQuery yazmaa başladım ve sadece 1 komutla istediğimiz Li tagını slideUp,slideDown yapma imkanımız var.
Konu sapmadan anlatıma geceyim. İlk başta her zaman yaptığımız gibi once css dosyasını yazıyorum
##########################################
Css Kodları
Kod:
.kalip .kalip ul .kalip ul li .kalip ul li a .kalip ul li a:hover
Burada kalıp diye bir div oluşturduk sonra onun altına 500px genişliğinde ve 400px yuksekliğinde bir ul cercevesi oluşturduk. Oradaki margin:0px auto komutu ile ise ul cercevesini ortalama komutudur.
Sonra .kalip ul li tagımızı oluşturduk ve list-style:none değeri verdik yani liste etiketimii koyduk ve başındaki circle yani yuvarlak siyah işareti kaldırdık
Sonra .kalip ul li a tagını oluşturduk asıl sıralamla ve listeleme burada geciyor arkadaşlar a tagına display:block verdik yani bir ustteki li tagını komple doldurduk sonra margin:5px; verdik ve ustten sağdan soldan alttan 5 pxlik boşlıuk verdik sonra o tagın icindeki yazıyıda padding komutu ile istediğimiz kriterlere gore ortaladık
En sonda ise .kalip ul li a:hover tagını verdik ve ustune gelicen a tagında değişmesi gereken renk kodlarını yazdık ve css sayfamız bitti şimdi sıra html kodlarında
##########################################
Kod:
Bu kodları analtmaya gerek yok herşey ortada bu kodları index.html mize koyunca farkı goreceksiniz arkadaşlar.
Burada biz ALT ALTA sıralama yaptık şimdi ise yan yana sıralama yapcaz buradaki tek fark ise
.kalip ul li tagına float:left; komutu eleyeceğiz ve yan yana li taglarının sıralamasını sağlayacağız.
##################################
Kod:
.kalip .kalip ul .kalip ul li .kalip ul li a .kalip ul li a:hover
Html kodlarımızı yazıyoruz
Kod:
Şimdi on izlemelere bakalım
Demo sayfasına buradan indirebilirsiniz.
———————————————————
Bu makale Aycan.net tarafından yazılmıştır. Link gostermeden yayımlamak YASAKTIR.
Haydi ul – li taglarını oğrenelim
———————————————————