HTML und CSS Erstellung einer APP
HTML: head Sharky
HTML: body 1 Sharky App Willkommen! Einleitung Lorem ipsum …. Tickets kaufen Quiz
HTML: body 2 window.scrollTo(0,1);
CSS "UTF-8"; body { font-family: Helvetica; margin: 0; } header { background-color: blue; padding: 10px; } header h1 { margin: 0; color: #ffffff; text-align: center; }
CSS 2 section h1 { padding-left: 10px; } p.einleitung { font-weight: bold; padding-left: 10px; } button#tickets { background-color: #00cc00; }
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
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%); ); }
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); screen and (min-width: 768px) { aside { -webkit-column-count: 4; -webkit-column-gap: 15px; -webkit-column-rule: dotted 1px #555; }
JavaScript Füge in den body einen Tag ein, durch den die Datei app.js importiert wird!
JavaScript
JavaScript Importiere die Datei zepto.js
JavaScript
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.
JavaScript $(function(){ $('h1').append(' Welt '); $('button').on('click',function(){ $('h1').after(' '); $(this).replaceWith(' Sharky'); }); });
HTML-CSS Erstelle einen Button mit der id tickets, auf dem steht: Zeig mir ein Bild!
HTML-CSS Zeig mir ein Bild!