Budujemy prostą stronę internetową cz. 4

laptop blog

Kategoria wpisu Kursy, PHP, HTML, CSS Tagi: , , , , on przez .



Reading Time: 4 minutes

Witam w kolejnej 4 części kursu w tej części pokażę jak zbudować kolejne 3 sekcje strony według mojego projektu.

Linki do poprzednich części kursu znajdziecie poniżej:

prosty projekt strony internetowej

prosty projekt strony internetowej

Budowa pierwszej sekcji czyli <section id=”word”>

Pierwsza sekcja jak widać na załączonym powyżej obrazku składa się z jednego długiego akapitu. Nie jest więc zbytnio rozbudowaną sekcją.

W HTML zaimplementowałam ją następująco:

W ten sposób uzyskałam ogólny wygląd wciąż jednak brakuje odstępów. Postanowiłam je dodać ogólnie (globalnie dla tego projektu) czyli dla wszystkich elementów section:

 

Sekcje <section id=”us”> i <section id=”technology”>

Z pozoru obie te sekcje wyglądają prawie identycznie, zamienione są jednak kolejnością. W pierwszej najpierw jest obrazek a potem tekst z kolei w drugiej tekst a potem obrazek.

W HTML pierwsza z sekcji wygląda następująco:

Obie kolumny są równych rozmiarów dlatego posiadają klasy

Zasada ich działania nie uległa zmianie od poprzedniej wersji Bootstrap. Różnica polega na tym, że zastosowana jest tu technologia Flexbox.

 

Z punktu widzenia mojego projektu trochę ułatwiło mnie to pracę. Nie musiałam wprowadzać zbyt wielu zmian w CSS w celu wyśrodkowania zawartości kolumn względem siebie. Jedynie odnaleźć odpowiednią klasę align-items-center.

Inaczej podeszłam do <section id=”technology”> gdzie wzięłam pod uwagę układ pod urządzeniami mobilnymi. Dużo ładniej wygląda kiedy mamy układ obrazek tekst, obrazek tekst niż obrazek tekst, tekst obrazek.

Jak widać układ w HTML jest prawie identyczny jak znajdującej się wyżej sekcji.

Różnica polega na dodaniu nowych klas

  • order-md-2
  • order-md-1

Jak sama nazwa mówi klasy te określają kolejność wyświetlania elementów. W efekcie pierwszy div posiada order-md-2 co oznacza, że ma być drugim a drugi order-md-1 czyli ma być pierwszy.

Klasy order-md- mają jeszcze jedną cechę nie działają na urządzeniach mobilnych. W efekcie na smartphonie wyświetli się kolejność taka jak jest w HTML – najpierw obrazek potem text.

Teraz dodam jeszcze niewielki pudding nad tekstem

Jak widać na załączonym obrazku nie wszystko jeszcze wygląda jak na moim projekcie.

Obrazki nie zajmują całej szerokości kontenera a tekst jest troszkę za szeroki. Te problemy rozwiąże poniższe CSS:

 

 

Do skończenia tej strony zostały jeszcze dwie sekcje Design i Footer. Ich opis znajdzie się w kolejnej części kursu.

 

 

Flexbox – metody rozmieszczania elementów na stronie [CSS]

Przydatne linki:

https://getbootstrap.com/docs/4.1/utilities/flex/

Przeczytaj również

Odstępy pomiędzy literami w słowie CSS letter-spac... Zadaniem właściwości CSS letter-spacing jest ustawianie odległości (odstępów) pomiędzy poszczególnymi literami słowa w tekście. Za jej pomocą możemy w...
Automatyczne odświeżanie strony Prowadząc portal internetowy lub często aktualizowaną stronę gdzie nowy artykuł może pojawić się w ciągu kilku minut chcielibyśmy na bieżąco pojawiały...
Charakterystyka właściwości clip CSS Z pomocą własność CSS clip możemy określić, który fragment danego obiektu (np. grafiki) ma być widoczny lub też nie. W ten sposób możemy nadać obiekto...
Usuwanie obramowania klikniętych linków CSS Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML. Używają określenia obramowanie linka mam na...