 (2).png "Webmaster"){kind=small}
Css Html Listeleme Örneklerle Kullanımı
Html ve css de liste fonksiyonun nasıl kullanabileceğinizi anlatan başlangıç seviyesinde bir ders.
Sade html diliyle liste komutları sınırlı biçimleri vardı tabi Cascading Style Sheets (CSS) diye bir şey icat olunca, yepyeni bir boyut kazandı. Css ile listelemeyi nasıl kullanabileceğiniz yönünde açıklayıcı örnekler aşağıda anlatılmaktadır.
1. ÖRNEK HTML ÇIKIŞ GÖRÜNTÜSÜ
Bu Örnekteki css ve html kodlarıyla resimde gördüğünüz html çıktısını alırsınız
Roma rakkamlarıyla liste sıralama.
- Orange juice
- Chocolate
- Bread
- Eggs
- Bacon
- Beans
- Ham
- Rice
- Sugar
- Salt
- Tomatoes
2. ÖRNEK HTML ÇIKIŞ GÖRÜNTÜSÜ
<IMG style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" title="Css Liste Örnek 2" alt="Css Liste Örnek 2" src="http://i.i.com.com/cnwk.1d/i/tr/Eve/figs10122007/CSS1012_FigB.png" width=375 height=302>
Liste Satır Başlarına Karakterler koyma
Listnizde kullanabileceğiniz ascii karakter örnekleri
3. Örnek
<html>
<head>
<style type="text/css">
li {
list-style-image: url('arrow.gif');
}
</style>
</head>
<body>
<ol>
<li>Feed the fish</li>
<li>Check email</li>
<li>Clean the floor</li>
<li>Wash the clothes</li>
</ul>
</body>
</html>
3. ÖRNEK HTML ÇIKIŞ GÖRÜNTÜSÜ
<IMG style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" title="Css Liste Örnek 3" alt="Css Liste Örnek 3" src="http://i.i.com.com/cnwk.1d/i/tr/Eve/figs10122007/CSS1012_FigC.png">
Liste Satır Başlarına Resim Koyma
Listenizin satır başlarına resim ikonları koyabilirsiniz
4. Örnek
<html>
<head>
<style type="text/css">
ol {
padding: 5px;
width: 150px;
}
li {
list-style-type: none;
border: solid 1px blue;
}
</style>
</head>
<body>
<ol>
<li>Feed the fish</li>
<li>Check email</li>
<li>Clean the floor</li>
<li>Wash the clothes</li>
</ul>
</body>
</html>
4. ÖRNEK HTML ÇIKIŞ GÖRÜNTÜSÜ
<IMG style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" title="Css Liste Örnek 4" alt="Css Liste Örnek 4" src="http://i.i.com.com/cnwk.1d/i/tr/Eve/figs10122007/CSS1012_FigD.png">
Liste Biçimini ve Rengini Değiştirme
Listenizi bir tablo icersinde kullanabilir ve renklendirebilirsiniz.
5. Örnek
<html>
<head>
<style type="text/css">
ol {
font-family: "Courier";
border: green solid 2px;
color: orange;
}
</style>
</head>
<body>
<ol>
<li>Feed the fish</li>
<li>Check email</li>
<li>Clean the floor</li>
<li>Wash the clothes</li>
</ul>
</body>
</html>
(No Ratings Yet)
Loading ...
Henüz yorum yapılmamış