HTML - İç İçe Liste Örnekleri | TEKNİK AKIL

Html etiketlerinden <ul>, <ol> kullanılarak basit liste oluşturma örnekleri OL Etiketi ile Sıralı Liste Oluşturma, UL Etiketi ile Sırasız Liste Oluşturma, Basit Liste Örnekleri başlıklı yazılarda anlatılmıştır.

Bu yazımızda sıralı ve sırasız liste etiketleri birlikte kullanılarak iç içe liste örnekleri oluşturulacaktır.

İç içe liste örnekleri 1:

XHTML <ul type="disc"> <li>Kitap <ul type="circle"> <li>Edebiyat <ul type="square"> <li>Roman</li> <li>Öykü</li> <li>Şiir</li> <li>Türk Edebiyatı</li> </ul> </li> <li>Eğitim <ul type="square"> <li>Bilgisayar Kitapları</li> <li>Yabancı dil</li> <li>Sınav Kitapları</li> </ul> </li> <li>Çocuk <ul type="square"> <li>Masal</li> <li>Boyama</li> </ul> </li> </ul> </li> <li>Film <ul type="circle"> <li>Belgesel</li> <li>Animasyon</li> <li>Çizgi Film</li> </ul> </li> </ul>

12345678910111213141516171819202122232425262728293031323334

<ul type="disc"><li>Kitap<ul type="circle"><li>Edebiyat<ul type="square"><li>Roman</li><li>Öykü</li><li>Şiir</li><li>Türk Edebiyatı</li></ul></li><li>Eğitim<ul type="square"><li>Bilgisayar Kitapları</li><li>Yabancı dil</li><li>Sınav Kitapları</li></ul></li><li>Çocuk<ul type="square"><li>Masal</li><li>Boyama</li></ul></li></ul></li><li>Film<ul type="circle"><li>Belgesel</li><li>Animasyon</li><li>Çizgi Film</li></ul></li></ul>

İç içe liste örnekleri 2:

XHTML <ol> <li>Elektronik <ol type="a"> <li>Bilgisayar & Tablet <ul type="circle"> <li>Dizüstü Bilgisayar</li> <li>Masaüstü Bilgisayar</li> <li>Tablet</li> </ul> </li> <li>Telefon & Telefon Aksesuarları</li> <li>Beyaz Eşya <ul type="circle"> <li>Çamaşır Makineleri <ul type="square"> <li>Vestel</li> <li>Samsung</li> <li>Arçelik</li> </ul> </li> <li>Derin Dondurucular <ul type="square"> <li>Altus</li> <li>Uğur</li> </ul> </li> </ul> </li> </ol> </li> <li>Ev, Yaşam, Kırtasiye, Ofis <ol type="a"> <li>Mobilya</li> <li>Ev Tekstili</li> <li>Aydınlatma</li> </ol> </li> <li>Süpermarket, Petshop <ol type="a"> <li>Gıda Ürünleri <ul type="circle"> <li>Baharatlar</li> <li>Kahvaltılıklar</li> </ul> </li> <li>Petshop <ul type="circle"> <li>Kedi</li> <li>Köpek</li> <li>Balık</li> <li>Kuş</li> </ul> </li> </ol> </li> </ol>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556

<ol><li>Elektronik<ol type="a"><li>Bilgisayar & Tablet<ul type="circle"><li>Dizüstü Bilgisayar</li><li>Masaüstü Bilgisayar</li><li>Tablet</li></ul></li><li>Telefon & Telefon Aksesuarları</li><li>Beyaz Eşya<ul type="circle"><li>Çamaşır Makineleri<ul type="square"><li>Vestel</li><li>Samsung</li><li>Arçelik</li></ul></li><li>Derin Dondurucular<ul type="square"><li>Altus</li><li>Uğur</li></ul></li></ul></li></ol></li><li>Ev, Yaşam, Kırtasiye, Ofis<ol type="a"><li>Mobilya</li><li>Ev Tekstili</li><li>Aydınlatma</li></ol></li><li>Süpermarket, Petshop<ol type="a"><li>Gıda Ürünleri<ul type="circle"><li>Baharatlar</li><li>Kahvaltılıklar</li></ul></li><li>Petshop<ul type="circle"><li>Kedi</li><li>Köpek</li><li>Balık</li><li>Kuş</li></ul></li></ol></li></ol>