使用绝对定位划分板块
<!--main.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>疫情监控</title> <link href="../static/css/main.css" 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; }
可视化大屏制作
猜你喜欢
转载自blog.csdn.net/hxxjxw/article/details/104804186
今日推荐
周排行