1 / 17

HTML und CSS

HTML und CSS. Erstellung einer APP. HTML: head. <!DOCTYPE html > < html > < head > <title> Sharky </title> <link href ="styles.css" rel =" stylesheet ">

nicholas-schneider
Download Presentation

HTML und CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML und CSS Erstellung einer APP

  2. 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>

  3. 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>

  4. HTML: body 2 <script> window.scrollTo(0,1); </script> </body> </html>

  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); } @mediascreenand (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 <body> <script src="app.js"></script> </body>

  12. JavaScript Importiere die Datei zepto.js

  13. JavaScript <scriptsrc="zepto.js"></script>

  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 <script> $(function(){ $('h1').append('<button> Welt</button>'); $('button').on('click',function(){ $('h1').after('<imgsrc="sharky.jpg">'); $(this).replaceWith(' Sharky'); }); }); </script>

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

  17. HTML-CSS <buttonid="tickets">Zeig mir ein Bild!</button>

More Related