CSS Listeleme Tasarımı

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
466
Tepkime puanı
88
Puanları
28
Merhaba bu gün css nin listeleme tasarimini anlatayim
örnek şoyle bır tabela yazdık

Kod:
<ol>
  <li>Lorem, ipsum dolor.</li>
  <li>Alias, repellendus praesentium.</li>
  <li>Asperiores, voluptatem perspiciatis.</li>
  <li>Animi, placeat laudantium.</li>
</ol>

şimdı buna sorgu oluşturmadan harfleri 1 den 4 kadar sıralayalım

css dosyamıza şu kodları yazalım

Kod:
ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol li {
  counter-increment: my-awesome-counter;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
  font-weight: bold;
}



body {
  font-family: Montserrat, sans-serif;
}

sonuç

1.Lorem, ipsum dolor.
2.Alias, repellendus praesentium.
3.Asperiores, voluptatem perspiciatis.
4.Animi, placeat laudantium.

DEMO
 

Geri
Üst Alt