###### tags: `資訊系統實驗` # *2022/03/31 Lesson04_HW* ``` <!doctype html> <html> <head> <style> .head{ display: flex; align-items: center; } .logo{ width: 30%; } #nav{ font-size: 20px; font-family: monospace; width: 70%; } .site{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 220px; grid-gap: 5px; } .orange{ background-color: bisque; } .red{ display: grid; grid-row: span 2; background-color: crimson; } .green{ display: grid; grid-column: span 2; grid-row: span 2; background-color: lightgreen; } </style> </head> <body> <div class="head"> <div class="logo"> <img src="TKU.png" alt="TKU" style="width: 70px;height: 70px;"> </div> <nav id="nav"> <a href="#">Function 1</a> <a href="#">Function 2</a> <a href="#">Function 3</a> <a href="#">Function 4</a> </nav> </div> <div class="site"> <div class="orange"></div> <div class="green"></div> <div class="orange"></div> <div class="red"></div> <div class="orange"></div> <div class="orange"></div> <div class="orange"></div> <div class="red"></div> <div class="green"></div> <div class="orange"></div> <div class="orange"></div> <div class="green"></div> <div class="orange"></div> </div> </body> </html> ```