HTML und CSS Erstellung einer APP
HTML: head <!DOCTYPE html> <html> <head> <title>Sharky</title> <link href="styles.css" rel="stylesheet"> <metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> </head>
HTML: body 1 <body> <header> <h1>Sharky App</h1> </header> <section> <h1>Willkommen!</h1> <p class="einleitung">Einleitung</p> <aside> <p>Loremipsum ….</p> </aside> <buttonid="tickets">Tickets kaufen</button> <buttonid="quiz">Quiz</button> </section>
HTML: body 2 <script> window.scrollTo(0,1); </script> </body> </html>
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; }
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); } @mediascreenand (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 <body> <script src="app.js"></script> </body>
JavaScript Importiere die Datei zepto.js
JavaScript <scriptsrc="zepto.js"></script>
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 <script> $(function(){ $('h1').append('<button> Welt</button>'); $('button').on('click',function(){ $('h1').after('<imgsrc="sharky.jpg">'); $(this).replaceWith(' Sharky'); }); }); </script>
HTML-CSS Erstelle einen Button mit der idtickets, auf dem steht: Zeig mir ein Bild!
HTML-CSS <buttonid="tickets">Zeig mir ein Bild!</button>
