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. 如何在 libevent 中读取超过 4096 字节的数据

    如何在 libevent 中读取超过 4096 字节的数据 bufferevent 是 libevent 中相对高层的封装,较 event 使用起来方便很多. 之前有一个需求,需要从服务端读取数据进行 ...

  2. Direct2D 画刷篇

    微软文档:Brushes overview 本篇通过官方文档学习,整理出来的demo,初始样本请先创建一个普通的desktop app. // Test_Direct2D_Brush.cpp : De ...

  3. 谈谈Tomcat占用cpu高的问题

    目录 问题现场 线程死锁 vs 线程死循环 排查Java进程导致CPU持续高的方法 Tomcat的CPU占用高的原因总结 问题现场 测试环境tomcat进程占用CPU一直持续99%,但是通过jstac ...

  4. django学习第十天---ajax请求和JsonResponse

    AJAX 它是js的功能,特点:异步请求,局部刷新 简单请求示例 基于jquery的ajax请求 异步请求,不会刷新页面,页面上用户之前输入的数据都不会丢失 <p>下面是ajax请求< ...

  5. 【LeetCode哈希表#5】四数相加II（map）

    四数相加II 力扣题目链接(opens new window) 给定四个包含整数的数组列表 A , B , C , D ,计算有多少个元组 (i, j, k, l) ,使得 A[i] + B[j] + ...

  6. 4-request对象

    前端提交数据 必备知识点 前端form表单中action属性,不写默认是当前路由地址 前端form表单中的method属性,不写默认是GET请求 前端页面 templates\register.htm ...

  7. 【Azure API 管理】是否可以将Swagger 的API定义导入导Azure API Management中

    问题描述 是否可以将Swagger 的API定义导入导Azure API Management中? 操作步骤 是的,可以通过APIM门户导入单个的API Swagger定义文件.具体步骤如下: 第一步 ...

  8. Nebula Graph 1.0 Release Note

    Nebula Graph 1.0 发布了.作为一款开源分布式图数据库,Nebula Graph 1.0 版本旨在提供一个安全.高可用.高性能.具有强表达能力的查询语言的图数据库. 基本功能 DDL & ...

  9. STL-RBT_map,set模拟实现

    set #include"26RBT_container.h" namespace test { //set通过普通迭代器使用const迭代器实现限制key不能被修改 templa ...

  10. TCP的链接和断开_wireShark实践

    目录 准备 TCP连接的三次握手 WireShark验证 TCP的四次挥手 WireShark验证 状态解释 其他的 # 概述 终于到了学习总结时间了 准备 TCP连接的三次握手 转自https:/ ...