可視化大屏制作 使用絕對定位劃分闆塊
可視化大屏制作 <!--main.html--> <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>疫情監控</title> <link href="../static/css/main.css" target="_blank" rel="external nofollow" rel="stylesheet"/> <!-- 引入css樣式表 --> </head> <body> <div id="title">全國疫情實時追蹤</div> <div id="time">我是時間</div> <div id="l1">我是左1</div> <div id="l2">我是左2</div> <div id="c1">我是中1</div> <div id="c2">我是中2</div> <div id="r1">我是右1</div> <div id="r2">我是右2</div> </body> </html>/* main.css */ body{ margin: 0; background: #333; } #title{ position: absolute; width: 40%; height: 10%; top: 0; left: 30%; /* background: #666666; */ color: white; font-size: 30px; display: flex; align-items: center; justify-content: center; } #time{ position: absolute; width: 30%; height: 10%; top: 0; right: 0%; background: green; } #c1{ position: absolute; width: 40%; height: 30%; top: 10%; left: 30%; background: #777777; } #c2{ position: absolute; width: 40%; height: 60%; top: 40%; left: 30%; background: #888888; } #l1{ position: absolute; width: 30%; height: 45%; top: 10%; left: 0%; background: #666666; } #l2{ position: absolute; width: 30%; height: 45%; top: 55%; left: 0%; background: #666666; } #r1{ position: absolute; width: 30%; height: 45%; top: 10%; right: 0%; background: #777; } #r2{ position: absolute; width: 30%; height: 45%; top: 55%; right: 0%; background: #777; }可視化大屏制作 可視化大屏制作