Układ strony: baner, bloki i stopka

CSS: odstępy, ramki i układ - HTML i CSS: pierwsze strony (HTML/CSS/JS)

Tak wygląda typowy układ z arkuszy INF.03: baner u góry, pod nim blok lewy (menu) i blok prawy (treść), na dole stopka. Znaczniki header, main, nav, section i footer działają jak div, ale mówią, czym jest dana część. Bloki stoją obok siebie dzięki display: flex na main. Selektor * oznacza każdy element, a box-sizing: border-box wlicza padding i ramkę w szerokość, więc 25% i 75% dają razem całą stronę.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Układ strony</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    header {
      background-color: #4682b4;
      color: white;
      text-align: center;
      padding: 10px;
    }
    main {
      display: flex;
    }
    nav {
      width: 25%;
      background-color: #b0c4de;
      padding: 10px;
    }
    section {
      width: 75%;
      padding: 10px;
      height: 250px;
    }
    footer {
      background-color: #4682b4;
      color: white;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Schronisko Łapka 🐾</h1>
  </header>
  <main>
    <nav>
      <h3>Menu</h3>
      <ul>
        <li><a href="#">Psy</a></li>
        <li><a href="#">Koty</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
    <section>
      <h2>Witamy!</h2>
      <p>Pomóż nam znaleźć dom dla naszych podopiecznych.</p>
    </section>
  </main>
  <footer>Stronę wykonał: Jan Kowalski</footer>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu HTML i CSS: pierwsze strony · Zaloguj się, aby zapisać postęp na koncie.