Html Listeleme Örnekleri - İç İçe Listeler | Mehsatek

Bu yazımızda Html listeleme etiketlerini (ul etiketi, ol etiketi, li etiketi) kullanarak Html listeleme örnekleri yapacağız. Html listeleme etiketleri ile ilgili eksikleriniz olduğunu düşünüyorsanız Html Listeleme Etiketleri – ul Etiketi – ol Etiketi yazımı okuyabilirsiniz.

HTML LİSTELEME ÖRNEKLERİ

Html Kodları

XHTML <ol type="1"> <li> İstanbul <ul type="disc"> <li>Kadıköy</li> <li>Bağcılar</li> <li>Pendik</li> <li>Eminönü</li> </ul> </li> <li> Ankara <ul type="disc"> <li>Çankaya</li> <li>Mamak</li> <li>Yenimahalle</li> <li>Balgat</li> </ul> </li> <li> İzmir <ul type="disc"> <li>Karşıyaka</li> <li>Bornova</li> <li>Buca</li> <li>Gaziemir</li> </ul> </li> </ol>
12345678910111213141516171819202122232425262728293031 <ol type="1"><li> İstanbul<ul type="disc"><li>Kadıköy</li><li>Bağcılar</li><li>Pendik</li><li>Eminönü</li></ul></li><li> Ankara<ul type="disc"><li>Çankaya</li><li>Mamak</li><li>Yenimahalle</li><li>Balgat</li></ul></li><li> İzmir<ul type="disc"><li>Karşıyaka</li><li>Bornova</li><li>Buca</li><li>Gaziemir</li></ul></li></ol>

Görünümü

html-liste-ornekleri-ol-etiketi

Html Kodları

XHTML <ol type="A"> <li> Front-end Developer <ol type="1"> <li>Html</li> <li> Css <ul style="list-style-type:disc"> <li>Less</li> <li>Sass</li> </ul> </li> <li> Javascript <ul style="list-style-type:disc"> <li>Vue</li> <li>Angular</li> <li>React</li> </ul> </li> <li>Jquery</li> <li>Bootstrap</li> </ol> </li> <li> Back-end Developer <ol type="1"> <li>Java</li> <li>Php</li> <li>C#</li> <li>Python</li> </ol> </li> </ol>
123456789101112131415161718192021222324252627282930313233343536 <ol type="A"><li> Front-end Developer<ol type="1"><li>Html</li><li> Css<ul style="list-style-type:disc"><li>Less</li><li>Sass</li></ul></li><li> Javascript<ul style="list-style-type:disc"><li>Vue</li><li>Angular</li><li>React</li></ul></li><li>Jquery</li><li>Bootstrap</li></ol></li><li> Back-end Developer<ol type="1"><li>Java</li><li>Php</li><li>C#</li><li>Python</li></ol></li></ol>

Görünümü

html-listeleme-ornekleri

Html Kodları

XHTML <ul> <li> Bilgisayar <ul> <li> Laptop <ul> <li>Acer</li> <li>Dell</li> <li>Toshiba</li> <li>Casper</li> <li>Asus</li> </ul> </li> <li> Masaüstü Bilgisayar <ul> <li>Acer</li> <li>Dell</li> <li>Toshiba</li> <li>Casper</li> <li>Asus</li> </ul> </li> </ul> </li> </ul>
1234567891011121314151617181920212223242526272829 <ul><li> Bilgisayar<ul><li> Laptop<ul><li>Acer</li><li>Dell</li><li>Toshiba</li><li>Casper</li><li>Asus</li></ul></li><li> Masaüstü Bilgisayar<ul><li>Acer</li><li>Dell</li><li>Toshiba</li><li>Casper</li><li>Asus</li></ul></li></ul></li></ul>

Görünümü

html-liste-ornekleri-ul-etiketi

Html Kodları

XHTML <ul style="list-style-type:none"> <li> Sıcak İçecekler <ul style="list-style-type:square"> <li>Çay</li> <li>Kahve</li> <li>Salep</li> </ul> </li> <li> Soğuk İçecekler <ul style="list-style-type:square"> <li>Kola</li> <li>Gazoz</li> <li>Soda</li> </ul> </li> </ul>
1234567891011121314151617181920 <ul style="list-style-type:none"><li> Sıcak İçecekler<ul style="list-style-type:square"><li>Çay</li><li>Kahve</li><li>Salep</li></ul></li><li> Soğuk İçecekler<ul style="list-style-type:square"><li>Kola</li><li>Gazoz</li><li>Soda</li></ul></li></ul>

Görünümü

html-listeleme-ornekleri-ul-etiketi

Html Kodları

XHTML <ul style="list-style-type:none"> <li> Sıcak İçecekler <ol type="i"> <li>Çay</li> <li>Kahve</li> <li>Salep</li> </ol> </li> <li> Soğuk İçecekler <ol type="i"> <li>Kola</li> <li>Gazoz</li> <li>Soda</li> </ol> </li> </ul>
1234567891011121314151617181920 <ul style="list-style-type:none"><li> Sıcak İçecekler<ol type="i"><li>Çay</li><li>Kahve</li><li>Salep</li></ol></li><li> Soğuk İçecekler<ol type="i"><li>Kola</li><li>Gazoz</li><li>Soda</li></ol></li></ul>

Görünümü

html-listeleme-ornekleri-ol-etiketi

Bu yazımızda sadece Html kullanarak Html listeleme örnekleri yapmaya çalıştık. Bu listeleme örneklerine Css kodları uyguladığımız zaman çok şık menüler elde edebiliriz.

Html ve Css kullanarak menüler nasıl yapılıyor öğrenmek istiyorsanız şu yazılarımı inceleyebilirsiniz.

Css ile Yatay Sabit Menü Yapımı

Css ile Yatay Menü Yapımı

Css ile Yatay Açılır Menü Yapımı

Css ile Dikey Sabit Menü Yapımı

Css ile Dikey Menü Yapımı

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Tweet Pin It

Từ khóa » Html Iç Içe Listeleme örnekleri