38 lines
1.1 KiB
HTML
38 lines
1.1 KiB
HTML
<html> <head>
|
|
<style>
|
|
#container { width: 100%; display: grid;
|
|
grid-template-columns: 20% 80%; grid-template-rows: 2em 1fr 2em;
|
|
grid-template-areas: "nav head" "nav main" "nav foot";
|
|
}
|
|
|
|
#head, #foot { background-color: #aaa; }
|
|
#head { grid-area: head; }7
|
|
#foot { grid-area:foot; }
|
|
#nav { background-color: #ddd; grid-area: nav; }
|
|
#main { background-color: #fff; grid-area: main; min-height: 20em;
|
|
width: 100%; display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
grid-template-rows: 50% 50%;
|
|
grid-template-areas: "main_00 main_01" "main_10 main_11";
|
|
}
|
|
#main_00 { background-color: #f00; grid-area: main_00; }
|
|
#main_01 { background-color: #0f0; grid-area: main_01; }
|
|
#main_10 { background-color: #00f; grid-area: main_10; }
|
|
#main_11 { background-color: #ff0; grid-area: main_11; }
|
|
</style>
|
|
|
|
<title>Webseiten-Aufteilung</title>
|
|
</head> <body>
|
|
<div id="container">
|
|
<div id="head">Kopfzeile</div>
|
|
<div id="nav">Navigation</div>
|
|
<div id="main">Hauptbereich
|
|
<div id="main_00"></div>
|
|
<div id="main_01"></div>
|
|
<div id="main_10"></div>
|
|
<div id="main_11"></div>
|
|
</div>
|
|
<div id="foot">Fußzeile</div>
|
|
</div>
|
|
</body> </html>
|