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. sentry 在加载模块时闪退

    这是一个很久之前的问题了,今天记录一下,以便遇到同样问题的同学能够看到此文章 崩溃环境: 目前仅收到 windows 7 的部分用户反馈,在程序启动时发生闪退 问题分析: 查看用户提供的日志,可以看见 ...

  2. win32 - 将原始音频样本转换为wav文件

    需要先从麦克风中采样,代码样本可以参考官方示例: WASAPI Capture Shared Event Driven 官方示例采样10s, 我们需要在WriteWaveFile函数下添加生成原始音频 ...

  3. 使用Gulp压缩静态资源

    如果希望对在静态页面中引入的相关资源进行压缩(比如:CSS,JavaScript,图片等),可以使用Gulp实现. 当然,还可以使用其他打包工具,比如:Grunt,Webpack等等. Gulp是什么 ...

  4. Excel联动（wps）

    Excel联动(wps) https://www.wps.cn/learning/course/detail/id/330423.html demo: https://files.cnblogs.co ...

  5. 并发慎用——System.currentTimeMillis()

    好记忆不如烂笔头,能记下点东西,就记下点,有时间拿出来看看,也会发觉不一样的感受. System.currentTimeMillis()是极其常用的基础Java API,广泛地用来获取时间戳或测量代码 ...

  6. nginx中使用perl脚本来定制一些请求转发等等

    http://t.zoukankan.com/carriezhangyan-p-9359708.html https://blog.csdn.net/weixin_28917223/article/d ...

  7. centos8.x阿里源配置

    >>> cd /etc/yum.repo.d >>> mkdir bak >>> mv *.repo bak/ >>> cd b ...

  8. Java链接Mysql数据库整理，尽管很简单，但还是分享出来，希望对那些初级朋友有所帮助！！！

    Java MySQL 连接 Java MySQL 连接 本章节我们为大家介绍 Java 如何使用 使用 JDBC 连接 MySQL 数据库. Java 连接 MySQL 需要驱动包,最新版下载地址为: ...

  9. linux 命令行使用codeql

    目录 CodeQL 概述 安装 直接使用在线查询(lgtm) vscode使用codeql 下载 库文件 测试 linux控制台运行 下载 安装 创建数据库 编写QL查询数据库 简单解释 CodeQL ...

  10. 速存，详细罗列香橙派AIpro外设接口样例大全（附源码）

    本文分享自华为云社区<香橙派AIpro外设接口样例大全(附源码)>,作者:昇腾CANN. Orange Pi AI Pro 开发板是香橙派联合华为精心打造的高性能 AI 开发板,其搭载了昇 ...