Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

CSS LAYOUT Sommerkurs: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto.

Ähnliche Präsentationen


Präsentation zum Thema: "CSS LAYOUT Sommerkurs: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto."—  Präsentation transkript:

1 CSS LAYOUT Sommerkurs: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto

2 Typischer Seitenaufbau Verwendung von semantischem Markup (HTML5)

3 header nav section aside

4 Umsetzung mit HTML

5 Umsetzung mit HTML (vor HTML5)

6 CSS Seitenlayout einzelne Seitenabschnitte im HTML-Code durch DIV- Boxen / semantische Tags gekennzeichnet mit CSS und den Float-Regeln erfolgt die Positionierung der Boxen beliebige weitere Layouts sind möglich, z.B. aside nach links oder nach unten mehrere sections oder asides articles können wegfallen innerhalb eines articles kann es wieder header, section und footer geben (typisch für Blog-Posts: )

7 HTML/CSS Menüs Beispiel (Optik-Verlag, siehe Folie 3) Home Themen Anzeigen Bestellung Kontakt Warum ist die Darstellung als UL zweckmäßig?

8 HTML/CSS Menüs CSS Schritt 1 nav li{ list-style-type: none; background-color: #00007D; } nav li a { color: white; text-decoration: none; } Regel gilt für alle LI-Elemente innerhalb von nav

9 HTML/CSS Menüs CSS Schritt 2 nav li{... padding-left: 2.5%; padding-right: 2.5%; width: 15%; float: left; } 5 Menüeinträge: 5*15% = 75% 75% + 5*2.5%*2 = 100%

10 HTML/CSS Menüs CSS Schritt 3 nav ul{ padding: 0; margin: 0; } Standard-Einrückung der Aufzählung zurücksetzen

11 HTML/CSS Menüs CSS Schritt 4 nav li a { … display: block; } nav li:hover { background-color: #D6D6EA; text-decoration: none; } nav li:hover a{ color: #00007D; } Damit die ganze Menüfläche ein anklickbarer Link wird. Verhalten beim Berühren der Menüflächen mit der Maus

12 HTML/CSS Menüs CSS Schritt 5 nav li a { … text-align: center; } nav li{ height: 50px; line-height: 50px; font-size: 125%; font-family: Helvetica, sans-serif; font-weight: 600; }


Herunterladen ppt "CSS LAYOUT Sommerkurs: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto."

Ähnliche Präsentationen


Google-Anzeigen