Şimdi sitenin ızgara tasarımına bir göz atalım ve bireysel bileşenleri parçalayalım. Üç akış ve bir site alt bilgisinden ilk web ızgarasını oluşturmak için kullanılan popüler tekniğin yanı sıra, kayan noktanın neden bu kadar yararlı olduğunu keşfedelim.
Bir sitenin ızgara yapısını incelemek için bir "akış"ın ne olduğunu anlamanız gerekir. Akış, birbiri ardına yer alan sitenin unsurlarıdır. Örneğin, bunlar varsayılan olarak birbiri ardına giden div öğeleri olabilir. Ancak akış yeniden düzenlenebilir ve blok elemanlarının konumu değiştirilebilir.
Akışı kontrol etmek için bloğu sol veya sağ tarafa yerleştirebilen float özelliğini kullanıyoruz. CSS dosyasına yazmanız yeterlidir:
"sınıf veya blok adı" {float: sağ / sol; }
Float'ın tek dezavantajı, bir bloğu diğerinin üzerine "örtüşme" yeteneğidir.
Taşmayı önlemek için clear: Both kullanırız - bu özellik bloğun etrafındaki akışı ayarlar. Genişlik ve yüksekliği maksimum ve minimum olarak ayarlıyoruz, böylece değer içeriğin boyutuna (metin, resimler) göre şekilleniyor. Kenar Boşluğu - bloğun konumuna bağlı olarak dış kenar boşluklarının otomatik olarak oluşturulması için değeri otomatik olarak ayarlayın.
Şamandıra blokları iki yönde yerleştirebildiğinden, siteyi akışlara bölmek gelenekseldir - sol ve sağ. Programcının yalnızca iki akışa ihtiyacı varsa, o zaman sol ve sağ yüzerleri bırakır, ancak ikiden fazla varsa, marjları kullanarak marjları ayarlar. Bu nasıl olur:
.column1 {float: sol; genişlik: 65 piksel; minimum yükseklik: 50 piksel; sağ kenar boşluğu: 9px; // orta kutudan 9 piksel}
2 akış:
.column2 {float: sol; // sol bloğa, ancak "üst üste binme" olmadan, kenar boşluğu genişliğini uyguladığımız için: 80px; minimum yükseklik: 50 piksel; }
3 akış:
.column3 {float: sağ; genişlik: 65 piksel; minimum yükseklik: 50 piksel; }
Altbilgi (.footer) ile ilgilenmek:
.footer {temizle: ikisi de; // her iki tarafı da sarın}
Bu şekilde, üç akıştan oluşan kayan nokta kullanarak site için bir ızgara yaptık.
