Menu
Coddy logo textTech
ZACZNIJ NAUKĘ
flag Pl iconPolskidown icon

Układanie elementów

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

challenge icon

Wyzwanie

Łatwy

Poćwiczmy flexbox, aby utworzyć prosty poziomy pasek nawigacyjny. Użyj CSS, aby ostylować menu tak, by pasowało do projektu na poniższym obrazku.

Wykonaj poniższe kroki:

  1. Ustaw pasek nawigacyjny jako kontener flex.
  2. Dodaj odstępy między linkami.
    1. Użyj justify-content: space-around, aby równomiernie rozmieścić linki.
  3. Ostyluj pasek nawigacyjny.
    1. Ustaw kolor tła na dark blue.
    2. Dodaj trochę wypełnienia, aby utworzyć przestrzeń wokół linków.
  4. Ostyluj linki nawigacyjne.
    1. Wybierz elementy <a>.
    2. Ustaw kolor tekstu na white.
    3. Usuń domyślne podkreślenie.
    4. Ustaw rozmiar czcionki na 18px.
    5. Dodaj wypełnienie 8px 15px, aby uzyskać lepsze odstępy.

Spróbuj swoich sił

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </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