学习日报
学习内容：可视化大屏布局
代码示例：
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>疫情监控</title>
<link href="../static/css/main.css" rel="stylesheet" />
<style>
</style>
</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: #00FFFF;
}
#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: #777777;
}
#r1{
position: absolute;
width: 30%;
height: 45%;
top: 10%;
right: 0;
background: #666666;
}
#r2{
position: absolute;
width: 30%;
height: 45%;
top: 55%;
right: 0;
background: #777777;
}
运行截图：
__EOF__
本文链接：https://www.cnblogs.com/zyj3955/p/14587843.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！