Układ strony CSS

Układ strony

Strony internetowe są zazwyczaj dzielone na nagłówek, menu, zawartość i stopkę:

Istnieje wiele różnych projektów układów do wyboru. Ale powyższa struktura jest jedną z najczęściej używanych, dokładnie ją zbadamy w tym przewodniku.

Nagłówek

Nagłówek (header) znajduje się zazwyczaj na górze strony (lub poniżej menu nawigacyjnego). Zazwyczaj zawiera logo lub nazwę strony:

Przykład

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Wynik:

Nagłówek

Spróbuj sam

Nawigacja

Nawigacja zawiera listę linków, aby pomóc odwiedzającym nawigować po Twojej stronie:

Przykład

/* Kontener navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Linki w navbar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Link - zmiana koloru podczas podświetlenia */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Wynik:

Spróbuj sam

Zawartość

Typowy układ zależy od docelowego użytkownika. Najczęściej używane układy to jeden z poniższych (lub ich kombinacja):

  • 1-kolumnowyUkład (zwykle używany w przeglądarkach mobilnych)
  • 2-kolumnowyUkład (zwykle używany na tabletach i laptopach)
  • 3-kolumnowyUkład (tylko dla komputerów stacjonarnych)

1-kolumnowy:

2-kolumnowy:

3-kolumnowy:

Stworzymy układ trzech kolumn i zmienimy go na jeden kolumnowy na małych ekranach:

Przykład

/* Tworzenie trzech równych kolumn, które są sąsiednie i płynnie przemieszczają się */
.column {
  float: left;
  width: 33.33%;
}
/* Usuwanie płynności po kolumnach */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Ustawienia responsywne - Ustawiają trzy kolumny na stos, zamiast równolegle na małych ekranach (szerokość 600 pikseli lub mniejsza) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Wynik:

Pełne podręczne podręczniki technologii stron internetowych

Nasza podręczna książka obejmuje wszystkie aspekty technologii stron internetowych.

W tym standardy techniczne W3C: HTML, CSS, XML. Oraz inne technologie, takie jak JavaScript, PHP, SQL itp.

Narzędzia do testowania instancji online

W CodeW3C.com oferujemy tysiące przykładów.

Dzięki naszemu online edytorowi możesz edytować te przykłady i eksperymentować z kodem.

Szybki i zrozumiały sposób nauki

Czas to złoto, więc oferujemy Ci treści, które są szybkie i łatwe do zrozumienia.

Oferujemy Ci dostęp do każdej wiedzy, jaką potrzebujesz, w zrozumiałej i łatwej do śledzenia formie.

Spróbuj sam

Wskazówka:Aby utworzyć układ dwukolumnowy, zmień szerokość na 50％。 Aby utworzyć układ czterokolumnowy, użyj 25％.

Wskazówka:Czy chcesz wiedzieć, jak działa reguła @media? Przeczytaj nasz CSS Zapytania media Dowiedz się więcej na ten temat w tym rozdziale.

Wskazówka:Jednym z bardziej nowoczesnych sposobów tworzenia układu kolumn jest użycie CSS Flexbox. Jednak Internet Explorer 10 i wcześniejsze wersje go nie obsługują. Jeśli potrzebujesz obsługi IE6-10, użyj płynnych (jak powyżej).

Aby uzyskać więcej informacji na temat modułu układu Flexible Box, przeczytaj nasz CSS Flexbox Tutorial.

Różne kolumny

Główna treść (main content) jest największą i najważniejszą częścią Twojej strony internetowej.

Różnice w szerokości kolumn są bardzo częste, ponieważ większość przestrzeni jest przeznaczona na główną treść. Dodatkowa treść (jeśli istnieje) jest zwykle używana jako alternatywna nawigacja lub określone informacje związane z główną treścią. Możesz dowolnie zmieniać szerokość, pamiętaj tylko, że jej suma powinna wynosić 100％:

Przykład

.column {
  float: left;
}
/* Lewa i prawa kolumny */
.column.side {
  width: 25%;
}
/* Środkowa kolumna */
.column.middle {
  width: 50%;
}
/* Ustawienia responsywne - Ustawiają trzy kolumny na stos, zamiast równolegle */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Wynik:

Pełne podręczne podręczniki technologii stron internetowych

Nasza podręczna książka obejmuje wszystkie aspekty technologii stron internetowych.

W tym standardy techniczne W3C: HTML, CSS, XML. Oraz inne technologie, takie jak JavaScript, PHP, SQL itp.

Narzędzia do testowania instancji online

W CodeW3C.com oferujemy tysiące przykładów.

Dzięki naszemu online edytorowi możesz edytować te przykłady i eksperymentować z kodem.

Szybki i zrozumiały sposób nauki

Czas to złoto, więc oferujemy Ci treści, które są szybkie i łatwe do zrozumienia.

Oferujemy Ci dostęp do każdej wiedzy, jaką potrzebujesz, w zrozumiałej i łatwej do śledzenia formie.

Spróbuj sam

Stopka

Stopka znajduje się na dole strony. Zwykle zawiera takie informacje jak prawa autorskie i dane kontaktowe:

Przykład

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Wynik:

Stopka

Spróbuj sam

Responsywne układy strony internetowej

Poprzez użycie powyższego kodu CSS utworzyliśmy responsywny układ strony internetowej, który przełącza się między dwoma kolumnami a kolumną pełnej szerokości w zależności od szerokości ekranu:

Spróbuj sam