CSS HTML

Faydalı CSS Liste Biçimlendirme Örnekleri

Bu yazıda, Sprites Görüntü Arka Planı, Sayı Daire Arka Planlı Liste Stili ve Ok Görüntüsü ile Liste Stili gibi farklı türde liste stillerine sahip güzel css liste stilini nasıl oluşturacağınızı göstereceğiz.

Aslında, örnek css listesi stilleri, web tasarımcısının web tasarım arayüzünü (UI) iyileştirmeye yardımcı olacak örnek liste stili bulması için gerçekten yararlıdır.

Sıralı listelerin stilini kullanmak her zaman kolay olmuştur, önemli makaleleri işaret eder ve okuyucuya açık hale getirir. Numaraları biçimlendirmek için varsayılan tarayıcı stillerini kaldırmanız ve bunları hedeflemek ve buna göre stil oluşturmak için liste öğelerinize kancalar eklemeniz gerekir.

DEMO

CSS Sprites Dosyası Oluşturma

CSS Sprites, web sitenizin daha hızlı yüklenmesini sağlamak için görüntüleri tek bir dosyada birleştiren bir tekniktir, sınırsız sayıda görüntüyü tek bir görüntüde birleştirebilir ve css stilini kullanarak bu görüntüleri kullanmak için çağırabilirsiniz.

sprite dosyasını indir

1- Sprite tasarımı ile HTML Kaynak Kodu Oluşturma

CSS sprites biçimlendirmesi aşağıdaki gibi olacaktır.
Çıktı:

CSS Liste Örnekleri

CSS Liste Örnekleri

2- Sayı Çemberi Arka Planıyla Liste Stili Oluşturma

Bu liste stili, güzel çember arka plan rengiyle istediğiniz seviyeye göre numara sırasını gösterebilecek sıralı tip kullandık.

Numara Çember Arkaplanı ile birlikte öğretici kodlama listesi stilime geçelim:

CSS kaynak koduna geçelim:

Çıktı:

CSS Liste Örnekleri

CSS Liste Örnekleri

3- Ok Görüntüsü ile Liste Stili Oluşturma

Bu, basit ve kullanımı kolay olan ok resimli sırasız liste stili kullandık.

Aşağıdaki Ok Resmi ile Liste Stilimi kodlamamla başlayalım:

CSS kodlarını yapalım:

Ekran çıktısı:

 

 

Yorum bırak