Simondb
4 years ago
2 changed files with 101 additions and 0 deletions
+ 73
- 0
04-EX01/oef.css
View File
| @@ -0,0 +1,73 @@ | |||
| html{ | |||
| width: 720px; | |||
| } | |||
| .kweenie{ | |||
| width: 100%; | |||
| height: 50px; | |||
| background-color: skyblue; | |||
| position: fixed; | |||
| top: 0; | |||
| left: 0; | |||
| } | |||
| .onder{ | |||
| background-color: springgreen; | |||
| position: static; | |||
| width: 100%; | |||
| height: 150px; | |||
| } | |||
| .erboven{ | |||
| background-color: crimson; | |||
| width: 98%; | |||
| position: absolute; | |||
| margin-top: 60px; | |||
| margin-left: 10px; | |||
| top: 0; | |||
| left: 0; | |||
| } | |||
| .onderonder{ | |||
| background-color: yellowgreen; | |||
| position: relative; | |||
| box-sizing: border-box; | |||
| width: 100%; | |||
| height: 500px; | |||
| bottom: -10px; | |||
| margin-left: 10px; | |||
| right: 10px; | |||
| } | |||
| .div-1{ | |||
| background-color: #fff; | |||
| float: left; | |||
| box-sizing: border-box; | |||
| height: 40px; | |||
| width: 75%; | |||
| margin-top: 5px; | |||
| margin-left: 5px; | |||
| } | |||
| .div-2,.div-3,.div-4,.div-5,.div-6{ | |||
| background-color: cornflowerblue; | |||
| float: left; | |||
| box-sizing: border-box; | |||
| height: 40px; | |||
| margin-top: 4px; | |||
| margin-left: 3px; | |||
| width: 19%; | |||
| height: 80%; | |||
| border: 2px solid greenyellow; | |||
| } | |||
| .logo{ | |||
| background-color: #fff; | |||
| height: 40px; | |||
| width: 10%; | |||
| margin-top: 5px; | |||
| margin-right: 10px; | |||
| float: right; | |||
| box-sizing: border-box; | |||
| } | |||
+ 28
- 0
04-EX01/oef.html
View File
| @@ -0,0 +1,28 @@ | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title> | |||
| hi | |||
| </title> | |||
| <link rel="stylesheet" href="oef.css" /> | |||
| </head> | |||
| <body> | |||
| <div class="kweenie"> | |||
| <div class="logo"></div> | |||
| <div class="div-1"> | |||
| <div class="div-2"></div> | |||
| <div class="div-3"></div> | |||
| <div class="div-4"></div> | |||
| <div class="div-5"></div> | |||
| <div class="div-6"></div> | |||
| </div> | |||
| </div> | |||
| <div class="erboven"> | |||
| <div class="onderonder"></div> | |||
| </div> | |||
| </body> | |||
| </html> | |||
Loading…