modul:ffit:css:learningunits:lu01:aufgaben:display

LU01.A01 - CSS Grundlagen

Sie haben die Grundlagen gelesen.

  1. 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.
  2. Ä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.
Was Beschreibung
Produkt: -
Zeit: 10 Min.
Sozialform: Einzel- oder Partnerarbeit
Arbeitsmittel: Unterrichtsunterlagen, HTML-Editor, Browser

Sie haben die Grundlagen gelesen.

  1. Erstellen Sie die Dokumente `index.html` und `style.css`.
  2. Kopieren Sie die folgende Vorlage in Ihre Dokumente:
    <!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>
  3. Verlinken Sie das `syle.css` in Ihrem HTML-Dokument.
  4. Gestalten Sie Ihr HTML-Dokument gemäss Vorgabe.
Was Beschreibung
Produkt: HTML-Seite mit CSS Flexbox
Zeit: 15 Min.
Sozialform: Einzel- oder Partnerarbeit
Arbeitsmittel: Unterrichtsunterlagen, HTML-Editor, Browser
  • modul/ffit/css/learningunits/lu01/aufgaben/display.txt
  • Zuletzt geändert: 2024/08/29 08:57
  • von kdemirci