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. js与java使用AES加密算法实现前后端加密解密

    AES加密算法入门:https://blog.csdn.net/IndexMan/article/details/87284833 第三方crypto.js下载地址:https://download. ...

  2. B - Bracket Sequence题解

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

  3. golang常用库包：redis操作库go-redis使用(01)-Redis数据类型简介和连接Redis的几种方式

    第一篇:go-redis使用,介绍Redis基本数据结构和其他特性,以及 go-redis 连接到Redis(本篇) https://www.cnblogs.com/jiujuan/p/1720716 ...

  4. Java新建一个子线程异步运行方法

    如何在运行主方法的同时异步运行另一个方法,我是用来更新缓存: 1. 工具类 public class ThreadPoolUtils { private static final Logger LOG ...

  5. instance must be started before calling this method

    解决方法 检查zk的连接数: 端口号: 数据库连接配置: zk的连接配置: 如果都没有问题,就重启容器.

  6. ASP.NET Core 微信支付（四）【支付结果通知回调(未按照官方步骤) APIV3】

    官方文档 支付通知API 证书和回调报文解密 参考资料 netcore 中没有Request.InputStream 理论实战 对于我来说,这个微信支付结果通知回调有两个难点. 难点一 一开始在想是怎 ...

  7. 【ACM专项练习#03】打印图形、栈的合法性、链表操作、dp实例

    运营商活动 题目描述 小明每天的话费是1元,运营商做活动,手机每充值K元就可以获赠1元,一开始小明充值M元,问最多可以用多少天? 注意赠送的话费也可以参与到奖励规则中 输入 输入包括多个测试实例.每个 ...

  8. 【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息，存在安全风险

    问题描述 在创建Azure App Service时,服务端的配置使用Java 8 + Tomcat 8.5.默认的根目录页面显示出App Service Tomcat版本信息,存在一定的安全隐患. ...

  9. 【Azure 应用服务】Azure Function App Linux环境下的Python Function，安装 psycopg2 模块错误

    问题描述 在Azure中创建Function App(函数应用), 用以运行Python代码(Python Version 3.7). 通过VS Code创建一个HttpTrigger的Functio ...

  10. mysql-批量修改表的主键id，修改成联合主键

    1.sql脚本 一. 通过sql脚本,查出所有表的功能,并编写插入修改的联合主键,sql select concat('ALTER table ', TABLE_NAME, ' DROP PRIMAR ...