Budujemy prostą stronę internetową cz. 5

biuro strona kodowanie

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



Reading Time: 4 minutes

To już przed ostatnia część mojego kursu. Omówię w niej ostatnie dwie części budowanej strony internetowej.

W 6 ostatniej części pokażę animacje jakie warto dodać do strony. Linki do poprzednich części kursu znajdziecie poniżej:

Sekcja design

Podobnie jak sekcja znajdująca się zaraz pod nagłówkiem nie jest zbyt skompilowana.

Specjalnie do tej sekcji nie trzeba nic dodawać. Pojawia się tu jednak zwykły link. Nie posiada on określonego miejsca prowadzenia, jednak jak widać w projekcie wyróżnia się na tle reszty tekstu.

Powyższy kod wprowadza nas również do następnej sekcji, którą jest stopka.

Stopka – <Footer>

To już ostatnia sekcja.

footer - stopka

footer – stopka



W tej sekcji posiadamy wypunktowaną listę. A właściwie 3 wypunktowane listy. Kolumny można stworzyć również w inny sposób ja jednak wybrałam bardziej tradycyjny. Jak byście jednak chcieli spróbować zrobić inaczej alternatywną metodę znajdziecie pod linkiem.

Domyślne wypunktowanie na stronach jest w formie kropek. W projekcie jest ono jednak kwadratowe – dlatego dopisałam do CSS:

Teraz jeszcze dodam odstęp:

Podsumowanie kodu strony

Wiemy jak wyglądają już pojedyncze sekcje – warto jednak jeszcze raz zobaczyć kod w całości. I tak nasz index.html prezentuje się następująco:

Z kolej nasz plik CSS wygląda tak:

 

Powyższy kod pozbawiony jest praktycznie animacji. Kwestia animacji jak i sam gotowy szablon pojawią się w ostatniej części.

 

 

 

Przeczytaj również

Właściwości punktowanych list z CSS O tym jak w HTML stworzyć wypunktowaną listę pisałam już w jednym z wcześniejszych wpisów. Były to oczywiście proste punktowane lub numerowane listy t...
Animacja ikon, obrazków na przykładzie dłoni Dziś postaram się pokazać jak w prosty sposób uzyskać efekt animowanej ikony (małego obrazka) na stronie internetowej. Na początek warto zapoznać s...
Tekst 3D na stronie internetowej – CSS Tym razem na mój warsztat trafił dość ciekawy efekt przydatny do wyróżnienia tekstu na stronie. Chodzi oczywiści o tekst 3D, a właściwie o uzyskanie e...
Indeks Górny i Dolny w HTML i/lub CSS W języku skryptowym HTML jak i w CSS bardzo łatwo uzyskać jest efekt mniejszego tekstu u góry (indeks górny) lub dołu normalnego (indeks dolny). I...

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *