Trochę teorii…
Layout to układ strony. Układ to szkielet decydujący o rozmieszczeniu treści na stronie. Najczęściej chodzi o rozmieszczenie jej kilku bloków zawartości takich jak: menu, główny baner, treść i stopka.
Warto zaplanować layout strony aby rozmieszczenie bloków treści było logiczne. W świecie internetu funkcjonują pewne przyzwyczajenia użytkowników, np. każdy będzie szukał loga i menu na górze strony, a nie na dole.
Dzięki takim zgrupowanym elementom w ramach layout także o wiele łatwiej zarządzać. Odpowiednio skomponowana struktura strony pozwala przenieść zawartość strony z lewej na środek lub ustawić główną nawigację tak by wyświetlała się zawsze na górze mimo przewijania strony – scroll.
Poniżej dodaję zobrazowany przykład prostego layoutu:
magical-dan-pl198
magical-dan-pl198 by danielminschinski
Czas na Was❕ Przećwiczcie układ strony:
Ćwiczenie
- Stwórz nowy projekt w codesandbox.
- Dodaj podstawy szkielet strony wraz z plikiem ze stylami.
- Stwórz diva z klasą “header”. W środku dodaj słowo “Header”.
- Dodaj kolejnego diva z klasą “content”. W środku dodaj nagłówek z treścią “Tekst jednokolumnowy”.
- Po nagłówku dodaj akapit z przykładowym tekstem.
- Dla selektora body dodaj deklarację środkowania tekstu oraz zerowe marginesy.
- Dla klasy “header” dodaj deklarację koloru tła, padding na 15px oraz color tekstu na biały.
- Selektor p ustaw następującymi deklaracjami: rozszerz tekstu po równo w elemencie i ustaw padding góra/dół – 0, lewo/prawo 50px.
- Dla klasy “content” ustaw deklarację: szerokość na 500px oraz margines gora/dół – 0, lewo/prawo – auto.
relaxed-perlman-v6dct
relaxed-perlman-v6dct by danielminschinski
Teoria z krótkim ćwiczeniem za Wami💪😉W następnych postach postaram się rozszerzyć Wam temat.
Dla nowych czytelników: zapraszam do zapisywania się do Newslettera ◀ aby być na bieżąco z darmowym materiałem o programowaniu stron internetowych.
Zostawcie komentarz czy podobają się Wam materiały😉 Pozdrawiam✌😉
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA