Css Liste Biçimlendirmesi Nasıl Yapılır ?

nhtctn nhtctn

Html de sıklıkla kullandığımız yapılardan bir tanesi de liste yapısıdır.Bu liste yapısı kimi zaman adı üstüne bir liste oluşturmak için kimi zaman bir menü grubu oluşturmak için kullanılır.

Listele sıralı ve sırasız olmak üzere iki grup altında incelenir.Detayları buradan ulaşabilirsiniz. Kısaca anlatmak gerekirse sıralı listeler ol sırasız listeler ise ul etiketiyle tanımlanır.

<ul>
  <li>Html</li>
  <li>Css</li>
  <li>Javascript</li>
</ul>
ul {
   list-style-type:none;
}

Yukarıdaki örneğe biraz daha özellik eklersek aşağıdaki gibi bir sonuç elde ederiz.

<ul>
  <li>Html</li>
  <li>Css</li>
  <li>Javascipt</li>
</ul>
  ul{
            list-style-type: none;
            background-color: red;
        }
        li{
            color: #fff;
            font-size: 20px;
            margin: 5px;
        }

** Yukarıda list-style-type:none; diyerek varsayılan olarak gelen liste tipini kaldırmış oluyoruz.

list-style-type özelliğinin alabileceği diğer alternatifler için aşağıdaki örneği inceleyelim.

 <ul class="bir">
        <li>Html</li>
        <li>Css</li>
        <li>Javascipt</li>
    </ul>
    <ul class="iki">
        <li>Html</li>
        <li>Css</li>
        <li>Javascipt</li>
    </ul>
    <ol class="uc">
        <li>Html</li>
        <li>Css</li>
        <li>Javascipt</li>
    </ol>
    <ol class="dort">
        <li>Html</li>
        <li>Css</li>
        <li>Javascipt</li>
    </ol>
        .bir {
            list-style-type: circle;
        }

        .iki {
            list-style-type: square;
        }

        .uc {
            list-style-type: upper-roman;
        }

        .dort {
            list-style-type: lower-alpha;
        }

Css Liste ve Link Style Kodları ile Dikey Menü Yapımı

 <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">Hizmetler</a></li>
        <li><a href="#">Vizyonumuz</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
   ul {
            list-style-type: none;
            background-color: coral;
            width: 150px;
            margin: 0;
            padding: 0;
        }
        li a {
            text-decoration: none;
            color:  #fff;
            font-size: 20px;
            display: block;
            padding: 8px 16px;
        }
        li a:hover{
            color: darkblue;
        }

Css Liste ve Link Style Kodları ile Yatay Menü Yapımı

 <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">Hizmetler</a></li>
        <li><a href="#">Vizyonumuz</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;

        }

        li {
            float: left;
            background-color: tomato;

        }

        li a {
            text-decoration: none;
            color: #fff;
            font-size: 20px;
            display: block;
            padding: 8px 16px;
        }

        li a:hover {
            color: darkblue;
        }

Yorum yazın

BENZER YAZILAR

Css Renk Kullanımı

Html sayfalarımıza renk vermenin birden fazla yöntemi bulunmaktadır. Birincisi, ingilizce renk isimlerini yazarak renk verebiliriz. Orange, Yellow, Blue,…

12 Haziran 2020