Treść strony
Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 50 z 76.
Wyzwanie
ŁatwyW tym projekcie zbudujemy i ostylujemy prosty formularz logowania. Projekt pomoże Ci przećwiczyć kluczowe zagadnienia związane z CSS, w tym:
✅ Idealne centrowanie elementów na stronie internetowej
✅ Stylizowanie elementów formularza, takich jak pola tekstowe i przyciski
✅ Pracę z obramowaniami, cieniami i odstępami
✅ Pozostawienie miejsca na kreatywność w projekcie
Po zakończeniu projektu będziesz mieć dobrze ostylowany formularz logowania o nowoczesnym i dopracowanym wyglądzie, podobny do tego na poniższym obrazku.
Zastosuj style do tagu <body>. Wykonaj poniższe kroki:
- Ustaw kolor tła na wybrany jasny odcień.
- Użyj Flexboxa, aby wyśrodkować formularz zarówno w poziomie, jak i w pionie.
- Ustaw wysokość strony na
100vh, aby formularz pozostawał wyśrodkowany nawet po zmianie rozmiaru.
Spróbuj swoich sił
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
Wszystkie lekcje w sekcji Stylizacja za pomocą CSS
4Podstawy tekstu
Kolor tekstuRodzina czcionekRozmiar czcionkiGrubość czcionkiWyrównanie tekstuDekoracja tekstuWyzwanie powtórkowe #1Wyzwanie powtórkowe #27Model pudełkowy, część 1
Czym jest model pudełkowy?Odstęp wewnętrznyMarginesyObramowaniaSzerokość i wysokośćZadanie podsumowujące13Strona internetowa Tonga
Menu nawigacyjneNagłówek powitalny
Sekcja „O nas”Sekcja kontaktowaZnacznik viewportMedia query8Model pudełkowy, część 2
Rozmiar pudełkaZaokrąglenie rogówPrzepełnienieCień pudełkaWyzwanie podsumowujące3Podstawowe selektory
Wprowadzenie do selektorówSelektor typuSelektor klasySelektor identyfikatoraGrupowanie selektorówSelektor uniwersalnyWyzwanie: selektory9Flexbox
Czym jest Flexbox?Kierunek flexJustify ContentAlign ItemsIdealne wyśrodkowanieWyzwanie Flexbox12Podstawy responsywnego projektowania
Czym jest responsywne projektowanie?Znacznik meta viewportElastyczne układyJednostki viewportuPodstawy Media QueriesElastyczne obrazyPoćwicz samodzielnie: Edytor online Web