Menu
Coddy logo textTech
JETZT LERNEN
flag De iconDeutschdown icon

Elemente anordnen

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 73 von 76.

challenge icon

Aufgabe

Einfach

Lass uns Flexbox üben, um eine einfache horizontale Navigationsleiste zu erstellen. Verwende CSS, um das Menü so zu gestalten, dass es dem Design im Bild unten entspricht.

Folge den unten stehenden Schritten:

  1. Lege die Navigationsleiste als Flex-Container fest.
  2. Füge Abstände zwischen den Links hinzu.
    1. Verwende justify-content: space-around, um die Links gleichmäßig zu verteilen.
  3. Gestalte die Navigationsleiste.
    1. Setze die Hintergrundfarbe auf dark blue.
    2. Füge etwas Padding hinzu, um Platz um die Links zu schaffen.
  4. Gestalte die Navigationslinks.
    1. Wähle die <a>-Elemente aus.
    2. Setze die Textfarbe auf white.
    3. Entferne die standardmäßige Unterstreichung.
    4. Setze die Schriftgröße auf 18px.
    5. Füge 8px 15px Padding für bessere Abstände hinzu.

Probier es selbst

<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>

Alle Lektionen in Styling with CSS

1Einführung

Was ist CSS?CSS-SyntaxCSS-KommentareDas Head-TagDas Title-Tag

4Text-Grundlagen

TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungs-Challenge #1Wiederholungs-Challenge #2

7Box-Modell Teil 1

Was ist das Box-Modell?PaddingMarginsBordersBreite und HöheWiederholungs-Challenge

10Login-Formular

BodyFormular-ContainerProjekt-LektionEingabefeldProjekt-LektionButtonProjekt-Lektion

13Tonga Webseite

NavigationsmenüWillkommens-HeaderProjekt-LektionÜber-uns-BereichProjekt-LektionKontakt-BereichProjekt-LektionViewport-TagProjekt-LektionMedia QueryProjekt-Lektion

2CSS hinzufügen

Inline-CSSInternes CSSExternes CSSGrundlagen-Styling-Challenge

5Farben und Hintergründe

HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #1

8Box-Modell Teil 2

Box-SizingBorder-RadiusOverflowBox-ShadowRecap-Challenge

11Layout-Techniken

Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungZ-Index GrundlagenWiederholungs-Challenge

14Abschluss-Herausforderungen

Elemente anordnenFilmlisteHochzeitseinladungSchwebende Benachrichtigung

3Grundlegende Selektoren

Einführung in SelektorenTyp-SelektorKlassen-SelektorID-SelektorGruppen-SelektorenUniversal-SelektorSelektions-Herausforderung

6Café-Menü

Typografie-GrundlagenText-StylingProjekt-LektionFarben und HintergründeProjekt-Lektion

9Flexbox

Was ist Flexbox?Flex DirectionJustify ContentAlign ItemsDie perfekte ZentrierungFlexbox-Herausforderung

12Grundlagen des Responsive Designs

Was ist Responsive Design?Viewport Meta TagFluid LayoutsViewport-EinheitenMedia Queries GrundlagenFlexible Bilder