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.

世界疫情div界面搭建初步的更多相关文章

  1. [.net 面向对象程序设计进阶] (25) 团队开发利器（四）分布式版本控制系统Git——使用GitStack+TortoiseGit 图形界面搭建Git环境

    [.net 面向对象程序设计进阶] (25) 团队开发利器(四)分布式版本控制系统Git——使用GitStack+TortoiseGit 图形界面搭建Git环境 本篇导读: 前面介绍了两款代码管理工具 ...

  2. siebel 界面搭建

    Siebel界面的初步搭建都是基于Siebel Tools工具来创建的,其搭建步骤: 1. 首先先创建一个Project项目,点击project--->点 new Record--->输入 ...

  3. mvc项目架构分享系列之架构搭建初步

    mvc项目架构分享系列之架构搭建初步 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4.项目架构各部分解析 ...

  4. 1、IOS开发--iPad之仿制QQ空间（登录界面搭建+登录逻辑实现）

    开始搭建登录界面 登录界面效果图: 相关的图片资源下载百度云备份链接: http://pan.baidu.com/s/1o71cvMU 密码: 2h7e 步骤开始: 设置辅助窗口的位置在下方 快捷键o ...

  5. 不等高cell的tableView界面搭建

    一.搭建界面 1.界面分析 分析界面的层次结构,分析界面应该用什么控件来搭建 2.界面层次结构 分析之后,我们可以把这个界面分为四个模块(topView middleView commentView ...

  6. iOS彩票项目--第四天，新特性界面搭建，UICollectionViewController的初次使用

    一.新特性界面搭建的思路: 在AppDelegate加载主窗体的时候进行判断程序版本号,直接进入程序或者进入新特性展示界面 取出当前的版本号,与旧的版本号相比较(旧的版本号在进入程序的时候存起来 =& ...

  7. 分布式版本控制系统Git——使用GitStack+TortoiseGit 图形界面搭建Git环境(服务器端及客户端)(转)

    近期想改公司内部的源码管控从TFS为git,发现yubinfeng大侠有关git的超详细大作,现将其转载并记录下,以防忘记,其原博客中有更加详细的git及.net开发相关内容.原文地址:http:// ...

  8. Winform打砖块游戏制作step by step第一节---主界面搭建

    一 引子 为了让更多的编程初学者,轻松愉快地掌握面向对象的思考方法,对象继承和多态的妙用,故推出此系列随笔,还望大家多多支持. 二 本节内容---主界面搭建 1.主界面截图 2. 该窗体主要包含了以下 ...

  9. Ubuntu服务器WDCP可视化界面搭建注意

    title: Ubuntu服务器WDCP可视化界面搭建注意 前两天心血来潮,研究了下服务器搭建与部署. 领了个免费体验3天的vps服务器进行了实操. 在安装WDCP的时候遇到了些问题,网上大部分对问题 ...

  10. kafka-eagle监控界面搭建

    kafka-eagle监控界面搭建 一.背景 二 .mac上安装kafka-eagle 1.安装JDK 2.安装eagle 1.下载eagle 2.解压并配置环境变量 3.启用kafka的JMX 4. ...

随机推荐

  1. Spring Boot图书管理系统项目实战-9.归还图书

    导航: pre:  8.续借图书 next:10.借还统计 只挑重点的讲,具体的请看项目源码. 1.项目源码 需要源码的朋友,请捐赠任意金额后留下邮箱发送:) 2.页面设计 2.1 bookRetur ...

  2. B - Bracket Sequence题解

    B - Bracket Sequence 思路: 用一个flag来标记括号的数目,如果括号数目是个偶数的话,就代表当前要执行'+'操作,反之就是'*'操作.对于最外层的数,是没有计算的. 所以最后要单 ...

  3. IntelliJ IDE使用指南

    下载IDEA 注释模板 #if (${PACKAGE_NAME} && ${PACKAGE_NAME} != "")package ${PACKAGE_NAME}; ...

  4. 搜索引擎RAG召回效果评测MTEB介绍与使用入门

    RAG 评测数据集建设尚处于初期阶段,缺乏针对特定领域和场景的专业数据集.市面上常见的 MS-Marco 和 BEIR 数据集覆盖范围有限,且在实际使用场景中效果可能与评测表现不符.目前最权威的检索榜 ...

  5. 4、 mysql的explain分析执行计划

    EXPLAIN或者 DESC命令获取 MySQL如何执行 SELECT 语句的信息,包括在 SELECT 语句执行过程中表如何连接和连接的顺序. 查询SQL语句的执行计划 : explain sele ...

  6. python Ai 应用开发基础训练，字符串，字典，文件

    --------------------------------------    编程能是大模型应用的天花板............................................. ...

  7. [VueJsDev] 基础知识 - 常见编码集

    [VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html 常用编码集 ::: details 目录 目录 常用编码集 ...

  8. court 法院 单词记忆

    court 围绕得到 - 法院 讨好 c 表示得到 catch助记 ourt = turn = around = 围绕 围绕得到某一事物的地方或者行为 英[kɔːt],美[kɔrt] n. 法院, 法 ...

  9. STM32 SPI DMA 源码解析及总结

    一 前言 最近在调试stm32的SPI时候i,遇到了一个非常诡异的问题.中间花费了不少时间才把问题搞定.这中间暴露的问题值得反思.借此机会,还是梳理一下stm32的SPI的代码做一个总结吧. 二 初始 ...

  10. SQL之QL

    从中文语法上来说,应该先写FROM语句比较好理解 基础查询语句 SELECT [DISTINCT] target-list FROM tables WHERE qualification GROUP ...