Układ strony internetowej CSS
Układ strony internetowej
Witryna często dzieli się na nagłówki, menu, treść i stopkę:
Do wyboru jest mnóstwo różnych projektów układu. Jednak powyższa struktura jest jedną z najczęstszych i przyjrzymy się jej bliżej w tym samouczku.
nagłówek
Nagłówek zwykle znajduje się u góry strony (lub tuż pod górnym menu nawigacyjnym). Często zawiera logo lub nazwę strony internetowej:
Przykład
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Wynik
Header
Pasek nawigacyjny
Pasek nawigacyjny zawiera listę linków ułatwiających odwiedzającym poruszanie się po Twojej witrynie:
Przykład
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Wynik
Zawartość
Układ w tej sekcji często zależy od docelowych użytkowników. Najpopularniejszym układem jest jeden (lub ich połączenie) z następujących:
- 1-kolumna (często używana w przeglądarkach mobilnych)
- 2-kolumna (często używana do tabletów i laptopów)
- Układ 3-kolumnowy (używany tylko na komputerach stacjonarnych)
1-kolumna:
2-kolumna:
3-kolumnowy:
Stworzymy układ 3-kolumnowy, a na mniejszych ekranach zmienimy go na 1-kolumnowy:
Przykład
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Wynik
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Porada: Aby utworzyć układ dwukolumnowy, zmień szerokość na 50%. Aby utworzyć układ 4-kolumnowy, użyj 25% itd.
Wskazówka: czy zastanawiasz się, jak działa reguła @media? Przeczytaj więcej na ten temat w naszym rozdziale CSS Media Query .
Wskazówka: bardziej nowoczesnym sposobem tworzenia układów kolumn jest użycie CSS Flexbox. Jednak nie jest obsługiwany w programie Internet Explorer 10 i wcześniejszych wersjach. Jeśli potrzebujesz obsługi IE6-10, użyj pływaków (jak pokazano powyżej).
Aby dowiedzieć się więcej o module Flexible Box Layout Module, przeczytaj nasz rozdział dotyczący CSS Flexbox .
Nierówne kolumny
Główna treść to największa i najważniejsza część Twojej witryny.
Jest to powszechne w przypadku nierównych szerokości kolumn, tak że większość miejsca jest zarezerwowana na główną treść. Treść poboczna (jeśli istnieje) jest często używana jako alternatywna nawigacja lub do określenia informacji istotnych dla treści głównej. Zmień szerokości, jak chcesz, pamiętaj tylko, że łącznie powinno to wynosić 100%:
Przykład
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Wynik
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Stopka
Stopka jest umieszczona na dole strony. Często zawiera informacje takie jak prawa autorskie i dane kontaktowe:
Przykład
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Wynik
Responsywny układ strony internetowej
Wykorzystując część powyższego kodu CSS, stworzyliśmy responsywny układ strony, który różni się między dwiema kolumnami i kolumnami o pełnej szerokości w zależności od szerokości ekranu:
Słyszałeś kiedyś o W3Schools Spaces ? Tutaj możesz stworzyć swoją stronę od podstaw lub skorzystać z szablonu i hostować ją za darmo.
Rozpocznij za darmo ❯* Nie wymagamy karty kredytowej