Bilgi Sayamıyorum beta

Sitelerde içerik listelemek, menü oluşturmak, sıralama yapmak vb gibi olaylar için kullanılan ul-unordered list (sırasız liste), ol-ordered list (sıralı liste) ve li-list item (liste öğesi) birer html/xhtml öğesidir. Çoğunlukla dinamik içeriklerin çekilmesi sırasında satır içeriklerini yerleştirmek için kullanılır.

ul : Genellikle sıralama niteliğine sahip olmayan öğeler için kullanılır. Liste öğeleri başına kare, yuvarlak gibi şekiller konularak belirlenebilir.
ol : Genellikle sıralama, dizilim yapılan içeriklerin listelenmesi için kullanılır. Liste başlarında sayı, harf gibi işaretler kullanılabilinir.
li : ul ya da ol içinde yer alan listenin her bir öğesini kapsar.

Bu örnekte en basit kullanımı inceleyebilirsiniz.

<ol>

<li>İlk içerik</li>

<li>İkinci içerik</li>

<li>Üçüncü içerik</li>

</ol>

Listenen öğelere kolay içerik takibi yapılması ve temiz bir html çıkarmak adına site menüleri de genellikle bu şekilde yapılır.

<ul class="menu">

<li><a href="/aboutus.aspx">HAKKIMIZDA</a></li>

<li><a href="/services.aspx">HİZMETLERİMİZ</a></li>

<li><a href="/quality.aspx">KALİTE</a></li>

<li><a href="/referencesAll.aspx">REFERANSLARIMIZ</a></li>

<li><a href="/contact.aspx">İLETİŞİM</a></li>

<li><a href="/usefulAll.aspx">FAYDALI BİLGİLER</a></li>

</ul>

Görüldüğü üzere menü linkleri "a" olarak href ile gidecekleri adres belirtilerek liste öğeleri içine yerleştirilmiştir. Bu listeyi şu şekilde stillendirebiliriz:

ul.menu{ width:800px; height:130px; float:left;}

ul.menu li{ width:auto; height:130px; float:left;}

ul.menu li a{ width:auto; height:100px; float:left; text-decoration:none;

color:#4c4c4c; padding:15px 0px;font-size:13px;}

Bu stil dahilindeki öğelerin hiçbiri kalıcı özelliğe sahip değildir. Bu sadece bir örnektir ve "reset css" dediğimiz kendiliğinden olan stilleri sıfırlayan teknik ile beraber kullanılmıştır.

Listeme tekniği büyük ölçekte statik ve dinamik içerik listelemelerinde de kullanılır. Buna örnek olarak:

<ul class="indexList">

<li>

<a href='/newsDetail.aspx?id=15'>

<div class="imgContainer"><img src="/images/news/1.jpg" /></div>

<span class="date">tarih</span>

<span class="title">başlık</span>

<p>İçerik</p>

</a>

</li>

<li>

<a href='/newsDetail.aspx?id=15'>

<div class="imgContainer"><img src="/images/news/1.jpg" /></div>

<span class="date">tarih</span>

<span class="title">başlık</span>

<p>İçerik</p>

</a>

</li>

</ul>

Bu örnek aslında dinamik olan bir listenin parçasıdır. Öğeler link içerisine alınmıştır. Görsel, başlık ve içerik yazısı beraber gösterilmiştir. Bu listeye şu stili verebiliriz.

.indexList{ width:960px; float:left; margin:10px 0px;}

.indexList li{ width:960px; float:left; margin:0px 0px;

border-bottom-style:dashed; border-bottom-color:#ffffff;

border-bottom-width:2px;}

.indexList li a{ width:920px; float:left; padding:20px; text-decoration:none; }

.indexList li a:hover{ background-color:#ffffff; }

.indexList li a div.imgContainer{width:330px; height:158px; float:left;

margin-right:50px; overflow:hidden;}

.indexList li a div.imgContainer img{width:330px; height:auto; float:left;}

.indexList li a span.date{width:540px; float:left; color:#333333;

font-family:'sommetLight', Arial, Sans-Serif;

font-size:12px;}

.indexList li a span.title{width:540px; float:left; color:#e62e76;

font-family:'sommetLight', Arial, Sans-Serif;

font-size:20px; margin:5px 0px 7px 0px;}

.indexList li a p{width:540px; float:left; color:#777777;

font-family:'sommetLight', Arial, Sans-Serif; font-size:17px;

line-height:23px; height:71px; overflow:hidden; position:relative;}

Bu stil dahilindeki öğelerin hiçbiri kalıcı özelliğe sahip değildir. Bu sadece bir örnektir ve "reset css" dediğimiz kendiliğinden olan stilleri sıfırlayan teknik ile beraber kullanılmıştır. Font olarak kullanılan "sommetLight" lisanslı olarak webfont a çevrilip kullanılmıştır.

Bu html ve css in sitedeki görünümü şu şekilde olmuştur:

ul, li listeleme tekniği "bilgi sayamıyorum" dahilinde de pek çok kez kullanılmıştır.

BİLGİ SAYAMIYORUM beta

Html de ul, ol, li nedir? Nasıl stil verilir ve nasıl kullanılır?

BENZER 7

ETİKETLER