Kreator Układów Stron CSS (Flexbox & Grid)

Wizualne generowanie klasycznych szablonów stron WWW (nagłówek, menu boczne, treść główna, stopka) w czystym CSS Flexbox i CSS Grid.

Reklama

Kreator Układów Stron WWW (Flexbox & CSS Grid)

FLEXBOX

Podgląd struktury szablonu:

HEADER (Nagłówek)

NAV (Menu Nawigacyjne)

LEWY PANEL

GŁÓWNA TREŚĆ (MAIN)

FOOTER (Stopka: Wykonał PESEL)

Gotowy Kod HTML5 + CSS

/* Układ Flexbox: Nagłówek, Menu, Treść, Stopka */
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Egzamin INF.03</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        header { background: #4f46e5; color: white; padding: 20px; text-align: center; }
        nav { background: #3730a3; padding: 10px; text-align: center; }
        nav a { color: white; margin: 0 15px; text-decoration: none; font-weight: bold; }
        main {
            flex: 1;
            display: flex;
            gap: 20px;
            padding: 20px;
        }
        section#lewy { flex: 1; background: #e0e7ff; padding: 15px; }
        section#prawy { flex: 2; background: #f3f4f6; padding: 15px; }
        footer { background: #1f2937; color: white; padding: 15px; text-align: center; }
    </style>
</head>
<body>
    <header><h1>Portal Informatyczny</h1></header>
    <nav><a href="#">Strona Główna</a><a href="#">O nas</a><a href="#">Kontakt</a></nav>
    <main>
        <section id="lewy"><h2>Panel boczny</h2></section>
        <section id="prawy"><h2>Treść główna</h2></section>
    </main>
    <footer><p>Stronę wykonał: PESEL</p></footer>
</body>
</html>

Wskazówka CKE dotycząca box-sizing

Zawsze pamiętaj o dodaniu * { box-sizing: border-box; } na początku arkusza stylów CSS. Dzięki temu właściwości padding oraz border nie powiększają szerokości (width) elementów blokowych i nie łamią kolumn w szablonie.

Reklama

Chcesz poćwiczyć pytania egzaminacyjne?

Rozwiązuj pytania z oficjalnych arkuszy CKE dla kwalifikacji INF.03 — egzamin próbny na czas, nauka działami albo losowe pytanie. Bez konta i bez opłat.

Przejdź do testów INF.03