Das folgende Beispiel (vielen Dank Thorben) zeigt dir, wie du divs auch Schachteln kannst.
Hier wird ein Layout erzeugt, das für eine Webseite gut geeignet ist, da Bereiche wie
- Header
- Menu
- Content
- und Footer
vorhanden sind.
Hier kommt die index.html
<html>
<head>
<title>Meine Cookie Webseite</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<div id="webseite">
<div id="header">
<h1>I Like Cookies</h1>
</div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hier kommt die modern.css
body {
background-color:lightyellow;
text-align:center;
}
#webseite {
width:1000px;
margin:0 auto;
}
#header {
width:1000px;
height:150px;
background:orange;
border-radius: 10px;
}
#header h1 {
padding-top:50px;
font-size:60px;
font-weight:bold;
color:white;
font-family:Courier;
}
#main {
width:1000px;
}
#left {
float:left;
width:200px;
height:300px;
background:yellow;
margin-top:10px;
margin-bottom:10px;
border-radius: 6px;
}
#right{
float:right;
width:770px;
height:300px;
background:darkred;
margin-top:10px;
margin-bottom:10px;
border-radius: 6px;
}
#footer {
width:1000px;
height:30px;
background:orange;
border-radius: 10px;
margin-top:20px;
clear:both;
}
Hier beginnt nun dein erstes großes Projekt.
Diese Projekt wird in den folgenden Aufgaben weiterentwickelt.
Aufgabe 1:
Experimentiere mit Höhe, Breite und den Abständen. Wie sieht dein Layout aus?
Aufgabe 2:
Versuche deine Container nun mit entsprechendem Inhalt zu füllen.
- Fülle den Header mit einer entsprechenden Überschrift, z.B. HSV, Hello Kitty, etc
- Fülle den linken Container mit einem Menü, dass auf verschiedene Inhalte verweisst,
die zu deinem Thema passen. - Fülle deinen rechten Container mit Text und evtl. Bildern
- Fülle den Footer mit entsprechendem Inhalt.
Schaue dazu auf diversen Internetseiten, welche Art von Inhalt im Footer untergebracht ist.
Aufgabe 3:
Speichere deine Dateien unter vorname.html und design.css ab.
Aufgabe 4:
Abgabe über itsLearning.
Hier die Screenshots aus der Stunde:
Schreibe einen Kommentar