Przyjrzyjmy się projektowi siatki witryny i rozłóżmy poszczególne komponenty. Przyjrzyjmy się, dlaczego float jest tak przydatny, a także poznaj popularną technikę tworzenia pierwszej siatki internetowej z trzech strumieni i stopki witryny.
Aby zbadać konstrukcję sieciową witryny, musisz zrozumieć, czym jest „przepływ”. Flow to elementy strony, które znajdują się jeden po drugim. Na przykład mogą to być elementy div, które domyślnie występują jeden po drugim. Ale przepływ można zmienić, a położenie elementów blokowych można zmienić.
Aby kontrolować przepływ, używamy właściwości float, która może umieścić blok po lewej lub prawej stronie. Wystarczy napisać w pliku CSS:
"nazwa klasy lub bloku" {float: prawo / lewo; }
Jedyną wadą pływaka jest możliwość „zachodzenia” jednego bloku na drugi.
Aby uniknąć przejechania, używamy clear: both - ta właściwość ustawi przepływ wokół bloku. Ustawiamy szerokość i wysokość jako maksymalną i minimalną, tak aby wartość była kształtowana zgodnie z rozmiarem treści (tekst, obrazy). Margines - ustaw wartość na auto, aby marginesy zewnętrzne były tworzone automatycznie w zależności od lokalizacji bloku.
Ponieważ float może umieszczać bloki w dwóch kierunkach, zwyczajowo dzieli się witrynę na strumienie - lewy i prawy. Jeśli programista potrzebuje tylko dwóch strumieni, to pozostawia lewy i prawy pływak, a jeśli jest ich więcej niż dwa, to dostosowuje marginesy za pomocą marginesów. Jak to się stało:
.column1 {liczba: lewa; szerokość: 65px; min-wysokość: 50px; margines prawy: 9px; // 9px od środkowego pudełka}
2 strumienie:
.column2 {liczba: lewa; // do lewego bloku, ale bez "nakładania", ponieważ zastosowaliśmy szerokość marginesu: 80px; min-wysokość: 50px; }
3 strumienie:
.kolumna3 {liczba zmiennoprzecinkowa: prawa; szerokość: 65px; min-wysokość: 50px; }
Postępowanie ze stopką (.footer):
.footer {wyczyść: oba; // owijaj po obu stronach}
W ten sposób stworzyliśmy siatkę dla strony za pomocą pływaka, składającą się z trzech strumieni.
