世界疫情div界面搭建初步

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>布局练习</title>
 6     <link href="../static/css/try.css" rel="stylesheet"/>
 7 </head>
 8 <body>
 9 <div id="page_title">网页标题</div>
10 <div id="time">时间</div>
11 <div id="source_title">数据来源</div>
12 <div id="left">疫情数据总览</div>
13 
14 <div id="middle">
15     地图小标题
16     <div id="map">地图</div>
17     <div id="btn">全球现存/累计切换</div>
18 </div>
19 
20 <div id="right">查询版块小标题
21     <div id="etctitle">各个国家的数据</div>
22     <div id="res_data">数据列表</div>
23 </div>
24 <div id="column">柱状图</div>
25 </body>
26 <html>
复制代码

try.css

复制代码
 1 body{
 2     margin: 0;
 3     background: #ffeb7b;
 4 }
 5 #page_title{
 6     background-color: #00f00f;
 7     position: absolute;
 8     width: 10%;
 9     height: 5%;
10     /*margin: 10px 10px 10px 10px;*/
11     border: darkred solid 3px;
12 }
13 #time{
14     background-color: #02a6b5;
15     position: absolute;
16     width: 10%;
17     height: 5%;
18     left: 10%;
19     /*margin: 0px 0px 0px 0px;*/
20     border: darkred solid 3px;
21 }
22 #source_title{
23     background-color: #123456;
24     position: absolute;
25     width: 20%;
26     height: 5%;
27     right: 0;
28     /*margin: 10px 10px 10px 10px;*/
29     border: darkred solid 3px;
30 }
31 #left{
32     background-color: #FFB6C1;
33     position: absolute;
34     width: 20%;
35     height: 65%;
36     top: 5%;
37     margin: 10px 10px 10px 0px;
38     border: darkred solid 3px;
39 }
40 #middle{
41     background: azure;
42     position: absolute;
43     height: 65%;
44     width: 55%;
45     top: 5%;
46     left: 20%;
47     margin: 10px 10px 10px 10px;
48     border: darkred solid 3px;
49 }
50 
51 #map{
52     position: absolute;
53     text-align: center;
54     font-size: 20px;
55     background: darkseagreen;
56     top: 10%;
57     margin: 10px 0px 10px 10px;
58     height: 85%;
59     width: 96%;
60     border: darkred solid 3px;
61 }
62 #btn{
63     position: absolute;
64     text-align: center;
65     background: darkseagreen;
66     margin: 0px 10px 10px 10px;
67     right: 10px;
68     /*height: 5%;*/
69     width: 20%;
70     border: darkred solid 3px;
71 }
72 #right{
73     position: absolute;
74     text-align: center;
75     font-size: 20px;
76     background: darkseagreen;
77     top: 30px;
78     right: 0;
79     margin: 10px 0 10px 10px;
80     height: 92%;
81     width: 23%;
82     border: darkred solid 3px;
83 }
84 #column{
85     position: absolute;
86     left: 0;
87     background: mediumpurple;
88     margin: 10px 0 10px 0;
89     height: 25%;
90     width: 76%;
91     top: 72%;
92     border: darkred solid 3px;
93 }
复制代码

界面：

 

 

 

 

 

 Tomorrow the birds will sing.

posted @   靠谱杨  阅读(64)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具

喜欢请打赏

扫描二维码打赏

了解更多

点击右上角即可分享
微信分享提示
AI IDE Trae