UL Tagı Nasıl Kullanılır?
Etiketi madde işaretleri şeklinde olan listeler yapmak için kullanılır.
<ul>
<li>Abit</li>
<li>Kemal</li>
<li>Veli</li>
<li>İdris</li>
<li>Yalçın</li>
<li>Murat</li>
<li>Ahmet</li>
</ul>
<li>Abit</li>
<li>Kemal</li>
<li>Veli</li>
<li>İdris</li>
<li>Yalçın</li>
<li>Murat</li>
<li>Ahmet</li>
</ul>
Yukardaki kodların ekran çıktısı aşağıdaki gibidir
| Parametre | Değer | Açıklama | HTML5 | HTML 4.01 |
|---|---|---|---|---|
| type | disc, square, circle | Listenin hangi sembolle gösterileceğini belirtir. | Kullanılıyor | Kullanılması İstenmiyor |
<ul type="circle">
<li>Abit</li>
<li>Kemal</li>
<li>Veli</li>
<li>İdris</li>
<li>Yalçın</li>
<li>Murat</li>
<li>Ahmet</li>
</ul>
<ul type="disc">
<li>Abit</li>
<li>Kemal</li>
<li>Veli</li>
<li>İdris</li>
<li>Yalçın</li>
<li>Murat</li>
<li>Ahmet</li>
</ul>
<ul type="square">
<li>Abit</li>
<li>Kemal</li>
<li>Veli</li>
<li>İdris</li>
<li>Yalçın</li>
<li>Murat</li>
<li>Ahmet</li>
</ul>
<li>Abit</li>
<li>Kemal</li>
<li>Veli</li>
<li>İdris</li>
<li>Yalçın</li>
<li>Murat</li>
<li>Ahmet</li>
</ul>
<ul type="disc">
<li>Abit</li>
<li>Kemal</li>
<li>Veli</li>
<li>İdris</li>
<li>Yalçın</li>
<li>Murat</li>
<li>Ahmet</li>
</ul>
<ul type="square">
<li>Abit</li>
<li>Kemal</li>
<li>Veli</li>
<li>İdris</li>
<li>Yalçın</li>
<li>Murat</li>
<li>Ahmet</li>
</ul>
Yukardaki kodların ekran çıktısı aşağıdaki gibidir
<!DOCTYPE html>
<html>
<head>
<style>
li {display:inline-block; border:1px solid red; padding:5px;}
li:hover {
background-color:red;
}
ul > li > ul > li {
position:realtive;
display:block; border:1px solid green; padding:5px;
background-color:green;
}
ul > li > ul {
position:absolute;
display:none;
}
ul > li:hover > ul {
display:block;
}
li:hover a {
color:white;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li>
<a href="#news">News</a>
<ul>
<li>Akşam</li>
<li>Sabah</li>
<li>Millet</li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
<html>
<head>
<style>
li {display:inline-block; border:1px solid red; padding:5px;}
li:hover {
background-color:red;
}
ul > li > ul > li {
position:realtive;
display:block; border:1px solid green; padding:5px;
background-color:green;
}
ul > li > ul {
position:absolute;
display:none;
}
ul > li:hover > ul {
display:block;
}
li:hover a {
color:white;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li>
<a href="#news">News</a>
<ul>
<li>Akşam</li>
<li>Sabah</li>
<li>Millet</li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Yorumunuzu Ekleyin
