Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:ffit:2-jahr:css:learningunits:lu01:aufgaben:display [2025/08/20 18:28] – angelegt kdemirci
+++ de:modul:ffit:2-jahr:css:learningunits:lu01:aufgaben:display [2025/08/20 19:47] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
-====== LU01.A01 - CSS Grundlagen ======
+====== LU01.A02 - Display ======
 ===== Ausgangslage =====
 Sie haben die Grundlagen gelesen.
 ===== Aufgabenstellung =====
-  - Beschreiben Sie den Unterschied zwischen Block- und Inline-Elementen in HTML und geben Sie jeweils ein Beispiel für ein Block-Element und ein Inline-Element an.
+  - Erstellen Sie die Dokumente `index.html` und `style.css`.
-  - Ändern Sie das Anzeigeverhalten eines Elements mit der CSS-Eigenschaft "display" von "block" auf "inline" und umgekehrt. Erläutern Sie, wie sich das Layout des Elements ändert.
+  - Kopieren Sie die folgende Vorlage in Ihre Dokumente:<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>
+  - Verlinken Sie das `syle.css` in Ihrem HTML-Dokument.
+  - Gestalten Sie Ihr HTML-Dokument gemäss Vorgabe. {{:modul:ffit:css:learningunits:lu01:aufgaben:vorgabe.png?800|}}
 ===== Rahmenbedingungen =====
 ^ Was ^ Beschreibung ^
-| Produkt: | - |
+| Produkt: | HTML-Seite mit CSS Flexbox |
-| Zeit: | 10 Min. |
+| Zeit: | 15 Min. |
 | Sozialform: | Einzel- oder Partnerarbeit |
 | Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser |