Menu
Coddy logo textTech
ZACZNIJ NAUKĘ
flag Pl iconPolskidown icon

Kontener formularza

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 51 z 76.

challenge icon

Wyzwanie

Łatwy

W tej lekcji sprawimy, że formularz będzie wyglądał bardziej uporządkowanie i atrakcyjniej.

Wykonaj poniższe kroki:

  1. Dodaj style do kontenera formularza, aby go wyróżnić. Napisz regułę CSS, która wybiera element o klasie login-form.
    1. Ustaw kolor tła (biały lub dowolny, który dobrze wygląda).
    2. Dodaj wewnętrzny margines, aby zawartość miała wewnątrz trochę przestrzeni.
    3. Zaokrąglij rogi.
    4. Zastosuj box-shadow, aby uzyskać subtelny efekt unoszenia się.
    5. Dodaj obramowanie wokół formularza (wybierz dowolny kolor i grubość).
  2. Wyśrodkuj tekst wewnątrz formularza za pomocą właściwości text-align .

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

1Wprowadzenie

Czym jest CSS?Składnia CSSKomentarze CSSZnacznik headZnacznik title

4Podstawy tekstu

Kolor tekstuRodzina czcionekRozmiar czcionkiGrubość czcionkiWyrównanie tekstuDekoracja tekstuWyzwanie powtórkowe #1Wyzwanie powtórkowe #2

7Model pudełkowy, część 1

Czym jest model pudełkowy?Odstęp wewnętrznyMarginesyObramowaniaSzerokość i wysokośćZadanie podsumowujące

10Formularz logowania

Treść stronyKontener formularzaLekcja projektowaPole tekstoweLekcja projektowaPrzyciskLekcja projektowa

13Strona internetowa Tonga

Menu nawigacyjneNagłówek powitalnyLekcja projektowaSekcja „O nas”Lekcja projektowaSekcja kontaktowaLekcja projektowaZnacznik viewportLekcja projektowaMedia queryLekcja projektowa

2Dodawanie CSS

CSS inlineWewnętrzny CSSZewnętrzny CSSWyzwanie: podstawowe stylowanie

5Kolory i tła

Kolor tłaKolory HEXKolory RGBPrzezroczystość z RGBAWyzwanie podsumowujące nr 1

8Model pudełkowy, część 2

Rozmiar pudełkaZaokrąglenie rogówPrzepełnienieCień pudełkaWyzwanie podsumowujące

11Techniki układu

Elementy blokowe a liniowePodstawy pozycjonowaniaPozycjonowanie względnePozycjonowanie bezwzględnePozycjonowanie stałePodstawy z-indexWyzwanie podsumowujące

14Wyzwania końcowe

Układanie elementówLista filmówZaproszenie ślubnePływające powiadomienie

3Podstawowe selektory

Wprowadzenie do selektorówSelektor typuSelektor klasySelektor identyfikatoraGrupowanie selektorówSelektor uniwersalnyWyzwanie: selektory

6Kawiarniane menu

Podstawy typografiiStylizacja tekstuLekcja projektowaKolory i tłaLekcja projektowa

9Flexbox

Czym jest Flexbox?Kierunek flexJustify ContentAlign ItemsIdealne wyśrodkowanieWyzwanie Flexbox

12Podstawy responsywnego projektowania

Czym jest responsywne projektowanie?Znacznik meta viewportElastyczne układyJednostki viewportuPodstawy Media QueriesElastyczne obrazy

Poćwicz samodzielnie: Edytor online Web