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.
![中國大學畢業收入較高28個專業1，資訊安全。2，軟體工程。3，資訊工程。4，計算機科學與技術5，網絡工程。6，物聯網工程[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)