forked from WEB-IMB-WS2526/lab-development-imb
12: Demos und Labor
parent
40a53cf56e
commit
0375f8ac20
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link href="00_styles_simplebox.css" rel="stylesheet">
|
||||||
|
<title>Gestylte Box</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="simple-box">
|
||||||
|
<h2>Willkommen!</h2>
|
||||||
|
Dies ist eine einfache Box.<div class="oben">Container</div><div class="unten">Container</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
.simple-box {
|
||||||
|
background-color: #78abda;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 2px solid #333;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oben {
|
||||||
|
background-color: #e5f41d;
|
||||||
|
height: 20%;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.unten {
|
||||||
|
background-color: red;
|
||||||
|
height: 20%;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Zentrierung mit CSS</title>
|
||||||
|
<link rel="stylesheet" href="demo_styles_centered.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="outer-box">
|
||||||
|
<div class="centered-box">
|
||||||
|
<p>Die Luft ist klar, die Nächte still, ein weißer Schleier deckt das Land. Die Kälte ruht, wie sie es will,
|
||||||
|
und malt mit Frost die Bäume zart.</p>
|
||||||
|
</div>
|
||||||
|
<div class="centered-box">
|
||||||
|
<p>Ein Funken Glanz im Kerzenlicht, die Stille trägt ein sanftes Kleid. Der Winter zeigt sein stilles
|
||||||
|
Gesicht, und schenkt uns Ruhe, tiefe Zeit.</p>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="centered-box">
|
||||||
|
<p>Die Flüsse ruhn in starrem Eis, ein Glitzern liegt auf jedem Zweig.
|
||||||
|
Der Winter hält das Land ganz leis, und schenkt ihm Schönheit ohne Gleich.</p>
|
||||||
|
</div>
|
||||||
|
<div class="centered-box">
|
||||||
|
<p>Ein Vogel zieht durch kalte Luft, sein Lied klingt fern und wunderbar.
|
||||||
|
Der Winter trägt den klaren Duft, und macht die Welt so rein und klar.</p>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
.outer-box {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
background-color: #112588;
|
||||||
|
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered-box {
|
||||||
|
width: 200px;
|
||||||
|
background-color: #e8f1f2;
|
||||||
|
border: 4px solid #95d4ea;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link href="demo_styles_positioning.css" rel="stylesheet">
|
||||||
|
<title>Absolute Positionierung</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="logo-container"></div>
|
||||||
|
<div class="navbar-container"></div>
|
||||||
|
<div class="content-container"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
.logo-container{
|
||||||
|
background-color: magenta;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
height: 8%;
|
||||||
|
width: 5%;
|
||||||
|
top: 0%;
|
||||||
|
left: 0%;
|
||||||
|
|
||||||
|
/* z-index: 1; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-container{
|
||||||
|
background-color: orange;
|
||||||
|
|
||||||
|
height: 8%;
|
||||||
|
width: 95%;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0%;
|
||||||
|
left:5%;
|
||||||
|
|
||||||
|
/* z-index: 0; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container{
|
||||||
|
background-color: cyan;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
height: 92%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
top: 8%;
|
||||||
|
left: 0%;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link href="03_styles_Lieblingsbuecher.css" rel="stylesheet">
|
||||||
|
<title>Meine Lieblingsbücher</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="logo-container">
|
||||||
|
<img src="img/buecher.png" alt="Buecher">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav id="navbar-container">
|
||||||
|
<a href="#fitzek">Sebastian Fitzek</a>
|
||||||
|
<a href="#neuhaus">Nele Neuhaus</a>
|
||||||
|
<a href="#garmus">Bonnie Garmus</a>
|
||||||
|
<a href="#schlink">Bernhard Schlink</a>
|
||||||
|
<a href="#follett">Ken Follett</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="content-container">
|
||||||
|
<h1>Lieblingsbücher</h1>
|
||||||
|
|
||||||
|
<div id="fitzek" class="buch-element">
|
||||||
|
<a href="https://www.thalia.de/shop/home/artikeldetails/A1071531890" target="_blank">Die
|
||||||
|
Einladung</a>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
Sebastian Fitzek
|
||||||
|
<br>
|
||||||
|
ca. 400
|
||||||
|
</div>
|
||||||
|
<div id="neuhaus" class="buch-element">
|
||||||
|
<a href="https://www.thalia.de/shop/home/artikeldetails/A1068434145" target="_blank">Monster</a>
|
||||||
|
<br><br>
|
||||||
|
Nele Neuhaus
|
||||||
|
<br>
|
||||||
|
ca. 560
|
||||||
|
</div>
|
||||||
|
<div id="garmus" class="buch-element">
|
||||||
|
<a href="https://www.thalia.de/shop/home/artikeldetails/A1062299989" target="_blank">Eine Frage
|
||||||
|
der Chemie</a><br><br>
|
||||||
|
Bonnie Garmus
|
||||||
|
<br>
|
||||||
|
ca. 464
|
||||||
|
</div>
|
||||||
|
<div id="schlink" class="buch-element">
|
||||||
|
<a href="https://www.thalia.de/shop/home/artikeldetails/A1069244098" target="_blank">Das späte
|
||||||
|
Leben</a><br><br>
|
||||||
|
Bernhard Schlink
|
||||||
|
<br>
|
||||||
|
ca. 240
|
||||||
|
</div>
|
||||||
|
<div id="follett" class="buch-element">
|
||||||
|
<a href="https://www.thalia.de/shop/home/artikeldetails/A1067829823" target="_blank">Die Waffen
|
||||||
|
des Lichts</a><br><br>
|
||||||
|
Ken Follett<br>
|
||||||
|
ca. 880
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo-container {
|
||||||
|
background-color: cadetblue;
|
||||||
|
width: 10%;
|
||||||
|
height: 10%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0%;
|
||||||
|
left: 0%;
|
||||||
|
/* z-index: 1; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo-container img {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
margin: auto;
|
||||||
|
/* z-index: 1; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar-container {
|
||||||
|
background-color: rgb(155, 207, 209);
|
||||||
|
width: 90%;
|
||||||
|
height: 10%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0%;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar-container a,
|
||||||
|
#navbar-container a:visited {
|
||||||
|
display: flex;
|
||||||
|
float: left;
|
||||||
|
width: 20%;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: rgb(4, 60, 116);
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar-container a:hover {
|
||||||
|
background-color: rgb(225, 236, 236);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
background-color: rgb(229, 228, 222);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 0%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buch-element {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
background-color: rgb(210, 194, 168);
|
||||||
|
height: 150px;
|
||||||
|
width: 18%;
|
||||||
|
padding: 1.5em 0;
|
||||||
|
margin: 10px 1% 10px 1%;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
|
|
@ -0,0 +1,34 @@
|
||||||
|
# Übungsblatt 12
|
||||||
|
|
||||||
|
## 1. CSS-Übung: Box-Modell
|
||||||
|
|
||||||
|
**Aufgabenstellung**: Setzen Sie diese Skizze in HTML und CSS um. Alle wichtigen Maße und Angaben für Ihren `<div>`-Container sind vorgegeben.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 2. CSS-Übung: Positionierung
|
||||||
|
|
||||||
|
**Aufgabenstellung**: Setzen Sie diese Skizze in HTML und CSS um. Alle wichtigen Maße und Angaben für die verschiedenen `<div>`-Container sind vorgegeben.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### Hinweise
|
||||||
|
1. Sie dürfen `1cm` in `1px` darstellen.
|
||||||
|
2. Die Farben dürfen frei gewählt werden.
|
||||||
|
|
||||||
|
## 3. CSS und Javascript: Adventskalender
|
||||||
|
|
||||||
|
**Aufgabenstellung**: Erstellen Sie einen einfachen Adventskalender in HTML, CSS und Javascript.
|
||||||
|
|
||||||
|
#### Arbeitsschritte
|
||||||
|
1. Erstellen Sie eine HTML-Seite mit der Überschrift "Adventskalender".
|
||||||
|
2. Es sollen 24 Kästchen (Türchen) auf der Webseite in ansprechenden/passenden Farben (Hintergrund und Rahmen) und Format zu sehen sein. Jedes Türchen trägt **in der Mitte** eine Nummer zwischen 1-24 als Inhalt.
|
||||||
|
3. Die Türchen werden so angeordnet, dass jedes Element **links im Container ansetzt** und die folgenden Elemente direkt daneben erscheinen, bis die verfügbare Breite erschöpft ist.
|
||||||
|
4. **Beim Klicken** auf ein Türchen wird zunächst geprüft, ob es überhaupt geöffnet werden darf (Türchen-Nummer mit heutigem Datum vergleichen).
|
||||||
|
5. Falls das Öffnen erlaubt ist, ändert sich die Hintergrundfarbe des Türchens und der Inhalt wird durch dieses Zeichen ausgetauscht: "\u{1F381}".
|
||||||
|
6. Falls das Öffnen noch nicht erlaubt ist, erscheint eine Meldung "Noch schläft das Türchen – wie ein Geschenk unter dem Baum.".
|
||||||
|
|
||||||
|
#### Hinweise
|
||||||
|
1. Die Kästchen dürfen auch dynamisch erzeugt werden (mit Javascript).
|
||||||
|
2. Für die Prüfung können Sie das `Date`-Objekt von Javascript verwenden.
|
||||||
|
3. Um einem DOM-Element dynamisch eine CSS-Klasse hinzufügen können Sie die `classList`-API in Javascript verwenden.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Loading…
Reference in New Issue