Html Listeleme Örnekleri - İç İçe Listeler

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ı

<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>

<li>

İstanbul

<li>Kadıköy</li>

<li>Bağcılar</li>

<li>Pendik</li>

<li>Eminönü</li>

</ul>

</li>

<li>

Ankara

<li>Çankaya</li>

<li>Mamak</li>

<li>Yenimahalle</li>

<li>Balgat</li>

</ul>

</li>

<li>

İzmir

<li>Karşıyaka</li>

<li>Bornova</li>

<li>Gaziemir</li>

</ul>

</li>

</ol>

Görünümü

Html Kodları

<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>

<li>

Front-end Developer

<li>

Css

</ul>

</li>

<li>

Javascript

<li>Angular</li>

<li>React</li>

</ul>

</li>

<li>Jquery</li>

<li>Bootstrap</li>

</ol>

</li>

<li>

Back-end Developer

<li>Python</li>

</ol>

</li>

</ol>

Görünümü

Html Kodları

<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>

<ul>

<li>

Bilgisayar

<ul>

<li>

Laptop

<ul>

<li>Toshiba</li>

<li>Casper</li>

</ul>

</li>

<li>

Masaüstü Bilgisayar

<ul>

<li>Toshiba</li>

<li>Casper</li>

</ul>

</li>

</ul>

</li>

</ul>

Görünümü

Html Kodları

<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>

<li>

Sıcak İçecekler

<li>Kahve</li>

<li>Salep</li>

</ul>

</li>

<li>

Soğuk İçecekler

<li>Gazoz</li>

</ul>

</li>

</ul>

Görünümü

Html Kodları

<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>

<li>

Sıcak İçecekler

<li>Kahve</li>

<li>Salep</li>

</ol>

</li>

<li>

Soğuk İçecekler

<li>Gazoz</li>

</ol>

</li>

</ul>

Görünümü

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.