Układ CSS wymaga, abyś myślał o układzie strony jako całości, a następnie wziął kawałki i złożył je razem. Dowiedz się, jak zbudować prosty układ 3-kolumnowy z CSS.
01 z 09Narysuj swój układ
Możesz narysować swój układ na papierze lub w programie graficznym. Jeśli masz już szkielet lub jeszcze bardziej rozbudowany projekt, uprość go do podstawowych pudełek, które tworzą witrynę. 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 wyciągnięciu układu możesz zacząć myśleć o wymiarach. Ten przykładowy projekt będzie miał następujące podstawowe wymiary:
- Nie ma więcej niż 900 pikseli szerokości
- 20 x rynna po lewej stronie
- 10 px między kolumnami i wierszami
- Kolumny o rozmiarze 250, 300 i 300 pikseli
- Górny rząd ma 150px wysokości
- Dolny rząd ma 100px wysokości
Napisz podstawowy HTML / CSS i utwórz element kontenera
Ponieważ ta strona będzie prawidłowym dokumentem HTML, Zacznij od pustego kontenera HTML
Dodaj podstawowe style CSS, aby wyrównać marginesy, krawędzie i paddings strony. Chociaż istnieją inne standardowe style CSS dla nowych dokumentów, te style to minimum potrzebne do uzyskania czystego układu. Dodaj je do nagłówka dokumentu:
Aby rozpocząć tworzenie układu, wstaw element pojemnika. Czasami zdarza się, że możesz pozbyć się kontenera później, ale w przypadku większości układów o stałej szerokości posiadanie elementu kontenerowego ułatwia zarządzanie w różnych przeglądarkach internetowych. Więc w ciele umieść to: W arkuszu stylów CSS umieść: Kontener określa, jak szeroka będzie zawartość strony internetowej, jak również marginesy na zewnątrz i dopełnienie od środka. W przypadku tego dokumentu pojemnik ma szerokość 870 pikseli, a rynna po 20 pikseli po lewej stronie. Rynna jest ustawiona w stylu marginesu, ale wyściółka na pojemniku jest wyzerowana, aby zapobiec jakiemukolwiek elementowi będącemu tak szerokiemu jak pojemnik. #pojemnik { szerokość: 870 pikseli; marża: 0 0 0 20px; / * góra prawy dolny lewy * / wypełnienie: 0; } Jeśli teraz zapiszesz dokument, trudno będzie zobaczyć kontener, ponieważ nie ma w nim nic. Jeśli dodasz tekst zastępczy, łatwiej będzie zobaczyć element kontenera. Sposób, w jaki wybierasz styl linii nagłówka, zależy w dużej mierze od tego, co się w niej znajduje. Jeśli wiersz nagłówka ma po prostu grafikę i nagłówek z logo, to użyj tagu nagłówka ( Kod HTML wiersza nagłówka znajduje się u góry kontenera i wygląda następująco: Następnie, aby ustawić style na nim, na dole dodano czerwoną ramkę, aby można było zobaczyć, gdzie się kończy, marginesy i dopełnienie zostały wyzerowane, szerokość ustawiona na 100%, a wysokość na 150 pikseli: #container h1 { margin: 0; wypełnienie: 0; szerokość: 100%; wysokość: 150 pikseli; float: left; border-bottom: # c00 solid 3px; } Nie zapomnij unieść tego elementu za pomocą pływaka: w lewo; 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 znajdują się elementy na stronie. Selektor potomka CSS zastosował style tylko do elementów H1, które znajdują się w elemencie #container. Kiedy tworzysz układ trzech kolumn z CSS, musisz podzielić swój układ na dwie grupy. Tak więc w przypadku tego układu z trzema kolumnami, środkowa i prawa kolumna oraz pogrupowane i umieszczone obok lewej kolumny w układzie dwukolumnowym, gdzie lewa kolumna ma szerokość 250 pikseli, a prawa kolumna ma szerokość 610 pikseli (300 dla każdej kolumny plus 10px za rynnę między nimi). HTML wygląda tak: Ut aliquip ex ea commodo consequat. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. W reprezentacji w voluptate quis nostrud exercitation eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Tekst zastępczy w kolumnach sprawia, że były bardziej widoczne podczas testowania. CSS wygląda następująco: #container # col1 { szerokość: 250px; float: left; } #container # col2outer { szerokość: 610 pikseli; float: right; margin: 0; wypełnienie: 0; } Kolumna po lewej stronie płynie w lewo, a druga płynie w prawo. Ponieważ całkowita szerokość obu kolumn wynosi 860 pikseli, między nimi jest rynna o wymiarach 10 pikseli. Aby utworzyć trzy kolumny, dodaj dwa elementy div wewnątrz szerszej drugiej kolumny, tak jak dodałeś 2 div wewnątrz kolumny kontenera w ostatnim kroku. HTML wygląda tak: Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas siedzieć aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, sed utatatis undnis omnis tempora incidunt ut labore et dolore. A CSS wygląda tak: # col2outer # col2mid { szerokość: 300px; float: left; } # col2outer # col2side { szerokość: 300px; float: right; } Ponieważ te dwa pudełka o szerokości 300 pikseli znajdują się w pudełku o szerokości 610 pikseli, ponownie znajdzie się między nimi rynna o wymiarach 10 pikseli. Teraz, gdy stylizowana jest reszta strony, możesz dodać stopkę. Użyj ostatniego elementu div z identyfikatorem "stopka" i dodaj zawartość, abyś mógł ją zobaczyć. Możesz również dodać krawędź u góry, abyś wiedział, gdzie to się zaczyna. HTML: CSS: #container #footer {
float: left;
szerokość: 870 pikseli;
border-top: # c00 solid 3px;
} 08 09 Po ukończeniu układu możesz zacząć dodawać własne style i treści. Pamiętaj, że granice w nagłówku i stopce zostały dodane, aby pokazać sekcje układu, a nie specjalnie dla projektu. Oto cały dokument, HTML i CSS: Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Nam libero tempore. Styl pojemnika
Użyj nagłówka do nagłówka
) ma więcej sensu niż używanie a
Mój wiersz nagłówka
Aby uzyskać trzy kolumny, zacznij od utworzenia dwóch kolumn
Dodaj dwie kolumny wewnątrz drugiej szerokiej kolumny
Dodaj stopkę
Dodaj własne style i treści
Ostateczny HTML / CSS
Mój wiersz nagłówka
