WEBMASTER ÖZEL > XHTML-CSS-HTML
HTML Lists (html liste oluşturma)
(1/1)
danua:
HTML Lists (html liste oluşturma)
*Sırasız Html Listeleri
--- Kod: ---<ul>
<li>Kitap</li>
<li>Defter</li>
<li>Kalem</li>
</ul>
--- Kod sonu ---
** Sırasız Listelerde Ögelerin Başlarına Gelen İşaretleri Değiştirebilirsiniz.
disc = içi dolu nokta,daire
--- Kod: ---<ul style="list-style-type:disc">
<li>Kitap</li>
<li>TDefter</li>
<li>Kalem</li>
</ul>
--- Kod sonu ---
circle= İçi boş daire
--- Kod: ---<ul style="list-style-type:circle">
<li>Kitap</li>
<li>TDefter</li>
<li>Kalem</li>
</ul>
--- Kod sonu ---
Square= Kare işareti
--- Kod: ---<ul style="list-style-type:Square">
<li>Kitap</li>
<li>TDefter</li>
<li>Kalem</li>
</ul>
--- Kod sonu ---
None= Nesnelerin önünde işaret yok
--- Kod: ---<ul style="list-style-type:None">
<li>Kitap</li>
<li>TDefter</li>
<li>Kalem</li>
</ul>
--- Kod sonu ---
* Sıralı Html Liste Oluşturma
--- Kod: ---<ol>
<li>Kitap</li>
<li>Dergi</li>
<li>Gazete</li>
</ol>
--- Kod sonu ---
Öge Başlarına 1,2,3,4.... Sayı ekler
type="1" Öge Başına Sayı Eklenir
--- Kod: ---<ol type="1">
<li>Kitap</li>
<li>Dergi</li>
<li>Gazete</li>
</ol
--- Kod sonu ---
type="A" Öge Başlarına A,B,C,D harf ekler
--- Kod: ---<ol type="A">
<li>Kitap</li>
<li>Dergi</li>
<li>Gazete</li>
</ol>
--- Kod sonu ---
type="a" Liste Başına a,b,c,d, ...Küçük haf ekler
--- Kod: ---<ol type="a">
<li>Kitap</li>
<li>Dergi</li>
<li>Gazete</li>
</ol>
--- Kod sonu ---
type="I" Liste başlarına roma rakamı ekler
--- Kod: ---<ol type="I">
<li>Kitap</li>
<li>Dergi</li>
<li>Gazete</li>
</ol>
--- Kod sonu ---
***Nesnelerin Altlarına Listeleme Yaparken Açıklama Girebilirsiniz
--- Kod: ---<dl>
<dt>Kitap</dt>
<dd>- Matematik Ders Kitabı</dd>
<dt>Yüzük</dt>
<dd>- 925 ayar gümüş</dd>
</dl>
--- Kod sonu ---
start="4" Listeyi oluştururken belli bir sayıdan başlamasını sağlaya bilirsiniz.(4,5,6,...)
--- Kod: ---<ol start="4">
<li>Defter</li>
<li>Kalem</li>
<li>Silgi</li>
</ol>
--- Kod sonu ---
** CSS ile Yatay Liste Ouşturma
--- Kod: ---<!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>
--- Kod sonu ---
Linkback: HTML Lists (html liste oluşturma)
Navigasyon
[0] Mesajlar
Tam sürüme git