de:modul:m287:learningunits:lu04:aufgaben:flexbox

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m287:learningunits:lu04:aufgaben:flexbox [2026/01/27 10:49] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1de:modul:m287:learningunits:lu04:aufgaben:flexbox [2026/01/27 12:05] (aktuell) – ↷ Links angepasst, weil Seiten im Wiki verschoben wurden 144.76.32.187
Zeile 1: Zeile 1:
 +====== LU04.A02 - Flexbox ======
  
 +===== Ausgangslage ======
 +
 +**HTML**
 +<code html>
 +<!DOCTYPE html>
 +<html lang="en">
 +<head>
 +    <meta charset="UTF-8">
 +    <title>Title</title>
 +</head>
 +<body>
 +    <div class="container">
 +        <div class="logo">Item 1</div>
 +        <div class="nav">
 +            <div class="nav-item">Item 1</div>
 +            <div class="nav-item">Item 2</div>
 +            <div class="nav-item">Item 3</div>
 +        </div>
 +    </div>
 +</body>
 +</html>
 +</code>
 +
 +**CSS**
 +<code css>
 +* {
 +    font-family: Arial;
 +    box-sizing: border-box;
 +    font-size: 28px;
 +}
 +body {
 +    padding: 20px;
 +    margin: 0;
 +}
 +.container {
 +    padding: 30px;
 +    background-color: rgba(195, 0, 255, 0.4);
 +    border: 2px solid rgb(195, 0, 255);
 +    border-radius: 25px;
 +}
 +.logo {
 +    padding: 40px;
 +    background-color: rgba(0,0,255, 0.4);
 +    border: 2px solid rgb(0,0,255);
 +    border-radius: 25px;
 +    color: blue;
 +}
 +.nav {
 +    padding: 20px;
 +    background-color: rgba(0,0,255, 0.4);
 +    border: 2px solid rgb(0,0,255);
 +    border-radius: 25px;
 +}
 +.nav-item {
 +    padding: 20px;
 +    background-color: rgba(255,0,0,0.4);
 +    border: 2px solid rgb(255,0,0);
 +    border-radius: 25px;
 +    color: red;
 +    margin: 10px;
 +}
 +</code>
 +
 +===== Aufgabenstellung =====
 +  - Gestalten Sie Ihr HTML-Dokument gemäss Vorgabe.
 +
 +{{de:modul:m287:learningunits:lu04:aufgaben:vorgabe.png?600|}}
 +
 +==== Rahmenbedingungen ====
 +^ Was ^ Beschreibung ^
 +| Produkt: | HTML-Seite mit CSS Flexbox |
 +| Zeit: | 15 Min. |
 +| Sozialform: | Einzel- oder Partnerarbeit |
 +| Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser |