Untitled
unknown
html
a month ago
2.2 kB
7
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Homework2</title> <style> body { padding: 0; margin: 0; overflow-x: hidden; height: 200vh; } .bigboxcontainer { width: 100vw; height: 100vh; } .bigbox { width: 300px; height: 300px; } .bigtopleft { /* position: ???; */ top: 0; left: 0; background-color: #f1c40f; } .bigtopright { /* position: ???; */ top: 0; right: 0; background-color: #e67e22; } .bigbottomleft { /* position: ???; */ bottom: 0; left: 0; background-color: #2ecc71; } .bigbottomright { /* position: ???; */ bottom: 0; right: 0; background-color: #3498db; } .smallcontainer { /* position: ???; */ width: 20vw; height: 20vh; background-color: #95a5a6; } .smallbox { width: 20%; height: 20%; } .smalltopleft { /* position: ???; */ top: 0; left: 0; background-color: #f1c40f; } .smalltopright { /* position: ???; */ top: 0; right: 0; background-color: #e67e22; } .smallbottomleft { /* position: ???; */ bottom: 0; left: 0; background-color: #2ecc71; } .smallbottomright { /* position: ???; */ bottom: 0; right: 0; background-color: #3498db; } .center { top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="bigboxcontainer"> <div class="bigbox bigtopleft">1</div> <div class="bigbox bigtopright">2</div> <div class="bigbox bigbottomleft">3</div> <div class="bigbox bigbottomright">4</div> </div> <div class="smallcontainer center"> <div class="smallbox smalltopleft">a</div> <div class="smallbox smalltopright">b</div> <div class="smallbox smallbottomleft">c</div> <div class="smallbox smallbottomright">d</div> </div> </body> </html>