HTML Sırasız Listeler
HTML <ul>etiketi, sırasız (madde işaretli) bir liste tanımlar.
Sırasız HTML Listesi
Sırasız bir liste <ul>etiketi ile başlar. Her liste öğesi
<li>etiketiyle başlar.
Liste öğeleri varsayılan olarak madde işaretleri (küçük siyah daireler) ile işaretlenecektir:
Örnek
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Sırasız HTML Listesi - Liste Öğesi İşaretçisini Seç
CSS list-style-typeözelliği, liste öğesi işaretçisinin stilini tanımlamak için kullanılır. Aşağıdaki değerlerden birine sahip olabilir:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
Örnek - Disk
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Örnek - Daire
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Örnek - Kare
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Örnek - Yok
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
İç İçe HTML Listeleri
Listeler iç içe yerleştirilebilir (liste içinde liste):
Örnek
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Not: Bir liste öğesi ( <li>) yeni bir liste ve resimler ve bağlantılar gibi diğer HTML öğelerini içerebilir.
CSS ile Yatay Liste
HTML listeleri, CSS ile birçok farklı şekilde şekillendirilebilir.
Popüler bir yol, bir gezinme menüsü oluşturmak için bir listeyi yatay olarak biçimlendirmektir:
Örnek
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
İpucu: CSS Eğitimimizde CSS hakkında çok daha fazla bilgi edinebilirsiniz .
Bölüm özeti
<ul>Sırasız bir liste tanımlamak için HTML öğesini kullanınlist-style-typeListe öğesi işaretçisini tanımlamak için CSS özelliğini kullanın<li>Bir liste öğesi tanımlamak için HTML öğesini kullanın- Listeler iç içe olabilir
- Liste öğeleri başka HTML öğeleri içerebilir
float:leftBir listeyi yatay olarak görüntülemek için CSS özelliğini kullanın
HTML Liste Etiketleri
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
Mevcut tüm HTML etiketlerinin tam listesi için HTML Etiket Referansımızı ziyaret edin .