CSS Web Sitesi Düzeni
Web Sitesi Düzeni
Bir web sitesi genellikle üstbilgilere, menülere, içeriğe ve altbilgiye bölünür:
Aralarından seçim yapabileceğiniz tonlarca farklı düzen tasarımı var. Ancak, yukarıdaki yapı en yaygın olanlardan biridir ve bu derste ona daha yakından bakacağız.
başlık
Bir başlık genellikle web sitesinin en üstünde (veya bir üst gezinme menüsünün hemen altında) bulunur. Genellikle bir logo veya web sitesi adı içerir:
Örnek
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Sonuç
Header
Gezinti çubuğu
Bir gezinme çubuğu, ziyaretçilerin web sitenizde gezinmesine yardımcı olacak bir bağlantı listesi içerir:
Örnek
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Sonuç
İçerik
Bu bölümdeki düzen, genellikle hedef kullanıcılara bağlıdır. En yaygın düzen, aşağıdakilerden biridir (veya bunları birleştirir):
- 1 sütun (genellikle mobil tarayıcılar için kullanılır)
- 2 sütun (genellikle tabletler ve dizüstü bilgisayarlar için kullanılır)
- 3 sütunlu düzen (yalnızca masaüstleri için kullanılır)
1 sütun:
2 sütun:
3 sütun:
3 sütunlu bir düzen oluşturacağız ve bunu daha küçük ekranlarda 1 sütunlu bir düzene değiştireceğiz:
Örnek
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Sonuç
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
İpucu: 2 sütunlu bir düzen oluşturmak için genişliği %50 olarak değiştirin. 4 sütunlu bir düzen oluşturmak için %25 vb. kullanın.
İpucu: @media kuralının nasıl çalıştığını merak ediyor musunuz? Bununla ilgili daha fazla bilgiyi CSS Medya Sorguları bölümümüzde okuyun .
İpucu: Sütun düzenleri oluşturmanın daha modern bir yolu, CSS Flexbox kullanmaktır. Ancak, Internet Explorer 10 ve önceki sürümlerinde desteklenmez. IE6-10 desteğine ihtiyacınız varsa, yüzer kullanın (yukarıda gösterildiği gibi).
Esnek Kutu Düzeni Modülü hakkında daha fazla bilgi edinmek için CSS Flexbox bölümümüzü okuyun .
Eşitsiz Sütunlar
Ana içerik, sitenizin en büyük ve en önemli parçasıdır.
Eşit olmayan sütun genişliklerinde yaygındır , bu nedenle alanın çoğu ana içerik için ayrılmıştır. Yan içerik (varsa) genellikle alternatif bir gezinme olarak veya ana içerikle ilgili bilgileri belirtmek için kullanılır. Genişlikleri istediğiniz gibi değiştirin, yalnızca toplamda %100'e kadar eklenmesi gerektiğini unutmayın:
Örnek
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Sonuç
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
altbilgi
Altbilgi, sayfanızın en altına yerleştirilir. Genellikle telif hakkı ve iletişim bilgileri gibi bilgileri içerir:
Örnek
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Sonuç
Duyarlı Web Sitesi Düzeni
Yukarıdaki CSS kodlarından bazılarını kullanarak, ekran genişliğine bağlı olarak iki sütun ve tam genişlikte sütunlar arasında değişen, duyarlı bir web sitesi düzeni oluşturduk:
W3Schools Spaces'ı hiç duydunuz mu? Burada web sitenizi sıfırdan oluşturabilir veya bir şablon kullanabilir ve ücretsiz olarak barındırabilirsiniz.
Ücretsiz başlayın ❯* Kredi kartına gerek yok