HTML und CSS Erstellung einer APP. HTML: head Sharky.

Präsentation zum Thema: "HTML und CSS Erstellung einer APP. HTML: head Sharky."—  Präsentation transkript:

1 HTML und CSS Erstellung einer APP

2 HTML: head Sharky

3 HTML: body 1 Sharky App Willkommen! Einleitung Lorem ipsum …. Tickets kaufen Quiz

4 HTML: body 2 window.scrollTo(0,1);

5 CSS 1 @charset "UTF-8"; body { font-family: Helvetica; margin: 0; } header { background-color: blue; padding: 10px; } header h1 { margin: 0; color: #ffffff; text-align: center; }

6 CSS 2 section h1 { padding-left: 10px; } p.einleitung { font-weight: bold; padding-left: 10px; } button#tickets { background-color: #00cc00; }

7 CSS 3 button { font-family: Helvetica; font-weight: bold; font-size: 20px; -webkit-appearance:none; border: 0; padding-left: 16px; padding-right: 16px; padding-bottom: 8px; padding-top: 8px; margin: 10px; background-color: #0044cc; color: #fff; border-radius: 9px; box-shadow: 0 1px 2px

8 CSS 4 rgba(0,0,0,0.3); text-shadow: 0 -1px 2px rgba(0,0,0,0.3); background-image: -webkit-linear- gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.2) 100%); ); }

9 CSS 5 aside { background-color: #ccc; padding: 10px; margin: 10px; box-shadow: 0px 2px 4px #666; text-shadow: 0px 2px 4px #666; border-radius: 10px; background-image: -webkit-linear-gradient(top, #eee, #fff); } @media screen and (min-width: 768px) { aside { -webkit-column-count: 4; -webkit-column-gap: 15px; -webkit-column-rule: dotted 1px #555; }

10 JavaScript Füge in den body einen Tag ein, durch den die Datei app.js importiert wird!

11 JavaScript

12 JavaScript Importiere die Datei zepto.js

13 JavaScript

14 JavaScript Erstelle eine Funktion, in der du h1 zu einem Zepto- Objekt machst und über die Funktion/Methode.append einen Button mit der Aufschrift Welt an h1 anhängst. Erstelle am Button das Event, dass durch das Klicken auf den Button das Bild sharky.jpg an h1 angehängt wird und der Button durch die Funktion/Methode.replaceWith vom String Sharky ersetzt wird.

15 JavaScript $(function(){ $('h1').append(' Welt '); $('button').on('click',function(){ $('h1').after(' '); $(this).replaceWith(' Sharky'); }); });

16 HTML-CSS Erstelle einen Button mit der id tickets, auf dem steht: Zeig mir ein Bild!

17 HTML-CSS Zeig mir ein Bild!