Gönderen Konu: HTML Lists (html liste oluşturma)  (Okunma sayısı 2995 defa)

danua

  • Yönetici
  • Kıdemli Üye
  • *****
  • İleti: 312
  • Karma 65535
HTML Lists (html liste oluşturma)
« : 25 Kasım 2018, 23:01:59 »
HTML Lists (html liste oluşturma)

*Sırasız Html Listeleri

Kod: [Seç]
<ul>
  <li>Kitap</li>
  <li>Defter</li>
  <li>Kalem</li>
</ul>

** Sırasız Listelerde Ögelerin Başlarına Gelen İşaretleri Değiştirebilirsiniz.

disc = içi dolu nokta,daire

Kod: [Seç]
<ul style="list-style-type:disc">
  <li>Kitap</li>
  <li>TDefter</li>
  <li>Kalem</li>
</ul> 

circle= İçi boş daire

Kod: [Seç]
<ul style="list-style-type:circle">
<li>Kitap</li>
  <li>TDefter</li>
  <li>Kalem</li>
</ul>

Square= Kare işareti

Kod: [Seç]
<ul style="list-style-type:Square">
<li>Kitap</li>
  <li>TDefter</li>
  <li>Kalem</li>
</ul>

None= Nesnelerin önünde işaret yok

Kod: [Seç]
<ul style="list-style-type:None">
<li>Kitap</li>
  <li>TDefter</li>
  <li>Kalem</li>
</ul>

* Sıralı Html Liste Oluşturma

Kod: [Seç]
<ol>
  <li>Kitap</li>
  <li>Dergi</li>
  <li>Gazete</li>
</ol>
Öge Başlarına 1,2,3,4.... Sayı ekler

type="1" Öge Başına Sayı Eklenir

Kod: [Seç]
<ol type="1">
  <li>Kitap</li>
  <li>Dergi</li>
  <li>Gazete</li>
</ol

type="A" Öge Başlarına A,B,C,D harf ekler
Kod: [Seç]
<ol type="A">
  <li>Kitap</li>
  <li>Dergi</li>
  <li>Gazete</li>
</ol> 

type="a" Liste Başına a,b,c,d, ...Küçük haf ekler
Kod: [Seç]
<ol type="a">
  <li>Kitap</li>
  <li>Dergi</li>
  <li>Gazete</li>
</ol> 

type="I" Liste başlarına roma rakamı ekler

Kod: [Seç]
<ol type="I">
  <li>Kitap</li>
  <li>Dergi</li>
  <li>Gazete</li>
</ol> 

***Nesnelerin Altlarına Listeleme Yaparken Açıklama Girebilirsiniz

Kod: [Seç]
<dl>
  <dt>Kitap</dt>
  <dd>- Matematik Ders Kitabı</dd>
  <dt>Yüzük</dt>
  <dd>- 925 ayar gümüş</dd>
</dl>

start="4" Listeyi oluştururken belli bir sayıdan başlamasını sağlaya bilirsiniz.(4,5,6,...)

Kod: [Seç]
<ol start="4">
  <li>Defter</li>
  <li>Kalem</li>
  <li>Silgi</li>
</ol>

** CSS ile Yatay Liste Ouşturma

Kod: [Seç]
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FF0000;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #000000;
}
</style>
</head>
<body>
<ul>
  <li><a href="#home">ANA SAYFA</a></li>
  <li><a href="#news">FORUM</a></li>
  <li><a href="#contact">PROGRAMLAR</a></li>
  <li><a href="#about">BLOG</a></li>
</ul>

</body>
</html>

Linkback: HTML Lists (html liste oluşturma)
« Son Düzenleme: 25 Kasım 2018, 23:46:25 Gönderen: danua »
𐱅𐰇𐰼𐰚

Sitelerim
:::::::::::::::::::
telkaricim.com

Tags: