Pazartesi , Temmuz 24 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML Dersleri / Html Listeleme Dersleri (9. Ders Sıralı ve Sırasız Listeleme )

Html Listeleme Dersleri (9. Ders Sıralı ve Sırasız Listeleme )

Html de listeleme yapmak için <li> etiketini kullanırız ve bu sıralamayı sıralı ve sırasız olarak yapabiliriz sıralı listeleme için <ol> Sırasız listeleme içinde <ul> etiketini kullanırız. Sıralı listeleme ile rakamlar ile başlayan bir sıralama oluşturabilirsiniz ilerde SQL ve programlama dillerine başladığınızda sıkça sıralama işlemleri yapacaksınızdır. Yapacağınız listelemeleri stil kodları kullanarak çeşitli düzenlemeler yapabilirsiniz.

Sıralı listeleme

  1. Birinci Başlık
  2. İkinci Başlık
  3. Üçüncü Başlık
  4. Dördüncü Başlık

Sırasız Listeleme

  • Birinci Başlık
  • İkinci Başlık
  • Üçüncü Başlık
  • Dördüncü Başlık

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

menuyatay ve menudikey olarak iki alanda listeleme yaptık ve stil kodları kullanarak bu listeyi sayfa menüsü gibi tasarladık. CSS derslerini öğrenerek daha detaylı menüler yapabilirsiniz. Bu menüler için stil kodlarında şu komutları verdik.

Yatay Menü Stil Kodları

.menuyatay{  Tanımlaması ile menuyatay classındaki kodlara şu komutları ver. }

width:800px; Komutu ile Alanımızın 800px genişliğinde olmasını.

height:50px; Komutu ile 50px yüksekliğinde olmasını.

background:#000; Komutu ile Arka planımızın siyah olmasını.

margin:0 auto; Komutu ile Alanımızın ortalanmasını

border-bottom:4px solid red; Komutu ile Alanımızın sadece alt çerçevesinde 4px. genişliğinde kırmızı bir hat olmasını istedik

.menuyatay ul li {Tanımlaması ile menuyatay classının içinde bulunan ul ile listelediğimiz li alanlarına şu komutları ver dedik.}

float:left;  Komutu ile hepsini sola yasla dedik ve bu sayede yatay menü elde ettik bu komutu kullanmasaydık diğer menümüz gibi dikey olurdu.

list-style-type:none;  Komutu ile ul vermiş olduğumuz listelemenin başında bir nokta olacaktı bu komut ile o noktaları kaldırdık.

.menuyatay ul li a{Tanımlaması ile menuyatay classının içinde bulunan ul ve li etiketleri içindeki a etiketiyle verdiğimiz alanlarına şu komutları ver dedik}

color:#fff; Komutu ile yazıların beyaz renkte olmasını istedik.

font:17px Arial; Komutu ile Yazı boyutunun 17px. ve arial formatında olmasını istedik.

text-decoration:none; Komutu ile a etiketinde vermiş olduğumuz bağlantı linklerinin normalde altı çizgili olur bu komut ile altındaki çizgiyi kaldırdık.

display:block; Komutu ile bu alanın bir kutucuk olmasını istedik.

padding:15px; Komutu ile yazı ile kutucuk arasında üstten sağdan alttan ve soldan olmak üzere 14px lik boşlukla başlamasını istedik.

.menuyatay ul li a:hover {Tanımlaması ile menuyatay classının içinde bulunan ul ve li etiketleri içindeki a etiketiyle verdiğimiz alanların üzerine fare ile geldiğimizde şu komutları uygula dedik. }

background:red; Komutu ile Fare imleci üzerine geldiğinde arka plan rengini kırmızı yap dedik.

color:#000; Komutu ile Fare imleci üzerine geldiğinde yazı rengini beyaz yap dedik.

Dikey Menü Stil Kodları

.menudikey {Tanımlaması ile menuyatay classındaki kodlara şu komutları ver.}

width:175px; Komutu ile Alanımızın 175px genişliğinde olmasını.

height:300px; Komutu ile 300px yüksekliğinde olmasını.

background:#000; Komutu ile Arka planımızın siyah olmasını.

border-right:4px solid red; Komutu ile Alanımızın sadece sağ alanındaki çerçevesinde 4px. genişliğinde kırmızı bir hat olmasını istedik

.menudikey ol li { Tanımlaması ile menuyatay classının içinde bulunan ol ile listelediğimiz li alanlarına şu komutları ver dedik.}

list-style-type:none; Komutu ile ul vermiş olduğumuz listelemenin başında bir rakam olacaktı bu komut ile o rakamları kaldırdık.

.menudikey ol li a{Tanımlaması ile menuyatay classının içinde bulunan ol ve li etiketleri içindeki a etiketiyle verdiğimiz alanlarına şu komutları ver dedik. }

color:#fff; Komutu ile yazıların beyaz renkte olmasını istedik

font:17px Arial; Komutu ile Yazı boyutunun 17px. ve arial formatında olmasını istedik.

text-decoration:none; Komutu ile a etiketinde vermiş olduğumuz bağlantı linklerinin normalde altı çizgili olur bu komut ile altındaki çizgiyi kaldırdık.

display:block; Komutu ile bu alanın bir kutucuk olmasını istedik.

padding:14px; Komutu ile yazı ile kutucuk arasında üstten sağdan alttan ve soldan olmak üzere 14px lik boşlukla başlamasını istedik.

.menudikey ol li a:hover{Tanımlaması ile menuyatay classının içinde bulunan ol ve li etiketleri içindeki a etiketiyle verdiğimiz alanların üzerine fare ile geldiğimizde şu komutları uygula dedik. }

background:red; Komutu ile Fare imleci üzerine geldiğinde arka plan rengini kırmızı yap dedik.

color:#000; Komutu ile Fare imleci üzerine geldiğinde yazı rengini beyaz yap dedik.

Hakkında BilgeBank

İlgili Makale

html form alanı

Html Form Alanları (11. Form, İnput, Type, Name, Value )

Html’de form alanlarını kullanıcıların bilgilerini almak için kullanırız bu bilgiler sayesinde kullanıcılar çeşitli bilgileri sayfanıza ekleyebilirler …

Bir Cevap Yazın