CSS Web Sitesi Düzeni

Web düzeni

Web siteleri genellikle başlık, menü, içerik ve alt kısım olarak bölünür:

Çok sayıda farklı düzen tasarımı seçenekleri mevcuttur. Ancak, yukarıdaki yapı en yaygın yapılarından biridir ve bu eğitimde ayrıntılı olarak inceleyeceğiz.

Başlık

Başlık (header) genellikle sitenizin üstünde (veya üst navigasyon menüsünün altında) yer alır. Genellikle logosu veya site adını içerir:

Örnek

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Sonuç:

Başlık

Kişisel Deneyim

Navigasyon çubuğu

Navigasyon çubuğu, ziyaretçilerin sitenizi tarayabilmesini sağlamak için bağlantı listeleri içerir:

Örnek

/* Navbar konteyneri */
.topnav {
  aşırı akış: gizli;
  background-color: #333;
}
/* Navbar bağlantısı */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Bağlantı - Üzerindeyken renk değiştirme */
.topnav a:hover {
  background-color: #ddd;
  color: siyah;
}

Sonuç:

Kişisel Deneyim

İçerik

Kullanılan düzen genellikle hedef kullanıcılarınıza bağlıdır. En yaygın düzenlerden biri aşağıdakilerden biridir (veya bunları bir araya getirin):

  • 1-çizgiDüzen (genellikle mobil tarayıcılar için kullanılır)
  • 2-çizgiDüzen (genellikle tablet ve dizüstü bilgisayarlar için kullanılır)
  • 3-çizgiDüzen (sadece masaüstü için)

1-çizgi

2-çizgi

3-çizgi

3 sütun düzeni oluşturacağız ve küçük ekranlarda 1 sütun düzenine dönüştüreceğiz:

Örnek

/* Üç eşit sütun oluşturmak ve birbirlerine yakınlıkla yüzeysel olarak yüzmek */
.column {
  float: left;
  width: 33.33%;
}
/* Sütunların ardından akışı temizle */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Yanıtlayıcı düzen - Üç sütunu yığınla, küçük ekranlarda (600 piksel veya daha küçük genişlikte) yan yana durmayı değil */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Sonuç:

Tam web teknoloji referans el kitabı

Bizim referans el kitabımız, web teknolojilerinin her yönünü kapsar.

Bu, W3C standart teknolojilerini içerir: HTML, CSS, XML. Ayrıca, JavaScript, PHP, SQL gibi diğer teknolojiler de vardır.

Çevrimiçi örnek test aracı

CodeW3C.com'da binlerce örnek sunuyoruz.

Online düzenleyiciyi kullanarak bu örnekleri düzenleyebilir ve kodları deneyebilirsiniz.

Hızlı ve Anlaşılır Öğrenme Yolu

Bir saat bir altın değerlidir, bu yüzden size hızlı ve anlaşılır öğrenim içerikleri sunuyoruz.

Burada, ihtiyacınız olan herhangi bir bilgiyi anlaşılır ve kolay bir şekilde elde edebilirsiniz.

Kişisel Deneyim

İpucu:2 sütun düzeni oluşturmak için genişliği 50% olarak değiştirin. 4 sütun düzeni oluşturmak için 25% kullanın.

İpucu:@media kurallarının nasıl çalıştığını öğrenmek istiyorsanız, bizim CSS Medya Sorguları Bu bölümde daha fazla bilgi edinmek için

İpucu:Sütun düzeni oluşturmanın daha modern bir yöntemi, CSS Flexbox kullanmaktır. Ancak, Internet Explorer 10 ve daha eski sürümler bunu desteklememektedir. IE6-10 desteği gerekiyorsa, yukarıda gösterildiği gibi kaydırma kullanın.

Esnek Box düzen modülü hakkında daha fazla bilgi edinmek için bizim CSS Flexbox Tutulma.

Eşit olmayan sütunlar

Ana içerik (main content), sitemizdeki en büyük ve en önemli bölümdür.

Sütun genişlikleri eşit olmayan durumlar oldukça yaygındır, çünkü çoğu alan ana içeriğe ayrılmıştır. Ek içerik (varsa) genellikle alternatif navigasyon veya ana içeriğe ilişkin belirli bilgiler olarak kullanılır. Genişliği rahatça değiştirebilirsiniz, ancak unutmayın ki toplamı 100% olmalıdır:

Örnek

.column {
  float: left;
}
/* Sol ve sağ sütunlar */
.column.side {
  width: 25%;
}
/* Orta sütun */
.column.middle {
  width: 50%;
}
/* Yanıtlayıcı düzen - Üç sütunu yığınla, yan yana durmayı değil */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Sonuç:

Tam web teknoloji referans el kitabı

Bizim referans el kitabımız, web teknolojilerinin her yönünü kapsar.

Bu, W3C standart teknolojilerini içerir: HTML, CSS, XML. Ayrıca, JavaScript, PHP, SQL gibi diğer teknolojiler de vardır.

Çevrimiçi örnek test aracı

CodeW3C.com'da binlerce örnek sunuyoruz.

Online düzenleyiciyi kullanarak bu örnekleri düzenleyebilir ve kodları deneyebilirsiniz.

Hızlı ve Anlaşılır Öğrenme Yolu

Bir saat bir altın değerlidir, bu yüzden size hızlı ve anlaşılır öğrenim içerikleri sunuyoruz.

Burada, ihtiyacınız olan herhangi bir bilgiyi anlaşılır ve kolay bir şekilde elde edebilirsiniz.

Kişisel Deneyim

Alt Bilgiler

Alt bilgiler sayfa altında yer alır. Genellikle telif hakkı ve iletişim bilgileri gibi bilgiler içerir:

Örnek

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Sonuç:

Alt Bilgiler

Kişisel Deneyim

Yansıtıcı Web Sitesi Düzeni

Yukarıdaki bu CSS kodlarını kullanarak, ekran genişliğine göre iki sütun ve tam genişlik sütunu değiştiren bir uyumlu web sitesi düzeni oluşturduk:

Kişisel Deneyim