W tym artykule wyjaśniono, jak zbudować 3-kolumnowy układ w CSS. Instrukcje dotyczą CSS3 i starszych.

Narysuj swój układ

Możesz narysować swój układ na papierze lub w program graficzny. Jeśli masz już na myśli szkielet lub jeszcze bardziej rozbudowany projekt, uprość go do podstawowych pudełek, które składają się na stronę. Ten projekt, który towarzyszy temu artykułowi, ma trzy kolumny w głównym obszarze zawartości, a także nagłówek i stopkę. Jeśli przyjrzysz się uważnie, zobaczysz, że trzy kolumny nie mają równej szerokości.

Po narysowaniu układu możesz zacząć myśleć o wymiarach. Ten przykładowy projekt będzie miał następujące podstawowe wymiary:

• Szerokość nie większa niż 900 pikseli
• Rynna 20 px po lewej stronie
• 10 px między kolumnami i rzędami
• Kolumny o szerokości 250 pikseli, 300 pikseli i 300 pikseli
instagram viewer
• Górny rząd ma 150 pikseli wysokości
• Dolny rząd ma 100 pikseli wysokości

Napisz podstawowy HTML/CSS i utwórz element kontenera

Ponieważ ta strona będzie ważna HTML dokument, zacznij od pustego kontenera HTML.

Dodaj podstawowe style CSS do wyzerować marginesy strony, obramowania i dopełnienia. Chociaż są inne standardowe style CSS w przypadku nowych dokumentów te style to minimum potrzebne do uzyskania czystego układu. Dodaj je do nagłówka swojego dokumentu.

Aby rozpocząć tworzenie układu, umieść w nim element kontenera. Czasami zdarza się, że możesz później pozbyć się kontenera, ale w przypadku większości układów o stałej szerokości posiadanie elementu kontenera ułatwia zarządzanie w różnych sieciach przeglądarki.

Stylizuj pojemnik

Kontener określa, jak szeroka będzie zawartość strony internetowej, a także wszelkie marginesy na zewnątrz i wypełnienie wewnątrz. W przypadku tego dokumentu kontener ma szerokość 870 pikseli z rynną 20 pikseli po lewej stronie. Rynna jest skonfigurowana w stylu marginesu, ale wyściółka kontenera jest wyzerowana, aby żadne elementy nie były tak szerokie jak kontener.

Jeśli teraz zapiszesz dokument, trudno będzie zobaczyć kontener, ponieważ nic w nim nie ma. Jeśli dodasz tekst zastępczy, zobaczysz wyraźniej element kontenera.

Użyj tagu nagłówka dla nagłówka

To, jak zdecydujesz się wystylizować wiersz nagłówka, zależy w dużej mierze od tego, co w nim jest. Jeśli wiersz nagłówka będzie zawierał tylko grafikę logo i nagłówek, użyj tagu nagłówka (

) ma więcej sensu niż użycie a

. Możesz stylizować nagłówek w taki sam sposób, jak stylizujesz div i unikasz zbędnych tagów.

Kod HTML wiersza nagłówka znajduje się na górze kontenera i wygląda tak:

Następnie, aby ustawić na nim style, dodano czerwone obramowanie na dole, aby można było zobaczyć, gdzie się kończy, marginesy i dopełnienie zostały wyzerowane, szerokość ustawiono na 100%, a wysokość na 150px.

Nie zapomnij umieścić tego elementu za pomocą float: left; własność. Kluczem do pisania układów CSS jest unoszenie wszystkiego, nawet rzeczy o tej samej szerokości co kontener. W ten sposób zawsze wiesz, gdzie będą leżeć elementy na stronie.

ZA Selektor potomków CSS zastosował style tylko do elementów H1, które znajdują się wewnątrz elementu #container.

Aby uzyskać trzy kolumny, zacznij od zbudowania dwóch kolumn

Tworząc układ z trzema kolumnami za pomocą CSS, musisz podzielić układ na dwie grupy. Tak więc dla tego układu trzykolumnowego środkowa i prawa kolumna oraz zgrupowane i umieszczone obok lewej kolumny w układzie dwukolumnowym gdzie lewa kolumna ma szerokość 250px, a prawa kolumna ma szerokość 610px (300 każda dla dwóch kolumn plus 10px dla rynny pomiędzy im).

Kolumna po lewej stronie płynie w lewo, a druga w prawo. Ponieważ łączna szerokość obu kolumn wynosi 860px, między nimi znajduje się rynna 10px.

Dodaj dwie kolumny wewnątrz szerokiej drugiej kolumny

Aby utworzyć trzy kolumny, dodaj dwa elementy div wewnątrz szerszej drugiej kolumny, tak jak w ostatnim kroku dodano 2 elementy div wewnątrz kolumny kontenera.

Ponieważ te dwa pudełka o szerokości 300 pikseli znajdują się w pudełku o szerokości 610 pikseli, ponownie będzie między nimi rynna o szerokości 10 pikseli.

Dodaj w stopce

Teraz, gdy pozostała część strony ma już styl, możesz dodać stopkę. Użyj ostatniego elementu div z identyfikatorem „stopki” i dodaj zawartość, aby móc ją zobaczyć. Możesz także dodać ramkę u góry, aby wiedzieć, gdzie się zaczyna.

Dodaj swoje osobiste style i treści

Teraz, gdy masz gotowy układ, możesz zacząć dodawać własne style i treści. Pamiętaj, że obramowania nagłówka i stopki zostały dodane, aby pokazać sekcje układu, a nie specjalnie dla projektu.