Układ strony (layout)
Ustawienie bloków
Domyslnie kazdy <section>, <header>, <footer> to display: block — kazdy na nowej linii.
Zeby ulozyc je obok siebie, uzywasz float lub flex.
Metoda 1 — Float
HTML:
CSS:
Metoda 2 — Flexbox
HTML:
CSS:
Typowe podzialy z egzaminow
| Arkusz | Podzial |
|---|---|
| 2021 (restauracja) | lewa 60% + prawa dopelnienie |
| 2022 (wedkarze) | lewa 55% + prawa 45% |
| 2023 (sklep) | lewa 35% + srodek 30% + prawa 35% |
| 2024 (firma IT) | logo+menu 50% + banner |
| 2025 (gry) | lewa 20% + srodek 60% + prawa 20% |
Pozycjonowanie — position
HTML:
CSS:
Obraz w tle za trescia
HTML:
CSS:
z-index: wyzszy = na wierzchu. Ujemny = pod normalną trescia.
Nawigacja pionowa — menu
HTML:
CSS:
Nawigacja pozioma — menu
HTML:
CSS:
Responsive — media query (arkusz 2025)
HTML:
CSS:
@font-face — wlasne czcionki (gdy egzamin daje pliki .woff2)
display — wartosci do zapamietania
| Wartosc | Co robi |
|---|---|
block |
Zajmuje cala szerokosc, zaczyna nową linię |
inline-block |
Jak inline, ale mozna ustawic wymiary |
inline |
Plynie jak tekst, bez wymiarow |
flex |
Kontener flexbox — dzieci obok siebie |
none |
Ukrywa element (znika z layoutu) |
Overflow (przewijanie bloku)
HTML:
CSS:
materiały: link