CSS Web Sitesi Düzeni
- Önceki Sayfa CSS Sayacı
- Sonraki Sayfa CSS Birim
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ç:
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ç:
İç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.
İ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.
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ç:
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:
- Önceki Sayfa CSS Sayacı
- Sonraki Sayfa CSS Birim