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. 负载均衡load balancing和算法分类概要介绍

    一.负载均衡介绍 1.1 什么是负载均衡 负载均衡(load balancing) 它是计算机的一种技术,用来在计算机集群.网络连接.CPU.磁盘驱动器或其他资源中分配负载,以达到优化资源使用.最大化 ...

  2. linux下安装django2.2

    安装 pip3 install django==2.2 创建项目 django-admin startproject pyweb 创建应用 django-admin startapp app01 修改 ...

  3. 解读平台工程，DevOps真的死了吗？不，它只是换了个马甲而已，弥补了DevOps空心理论，让DevOps继续发展壮大

    最**台工程这个概念越来越火爆,Gartner 的预测,到 2026 年,80% 的软件工程组织将拥有*台工程团队,来提供内部服务.组件和应用程序交付工具,作为可重复使用的资源.本篇文章将带你走进*台 ...

  4. 【Azure 云服务】Azure Cloud Service中的错误事件 Error Event(Defrag/Perflib) 解答

    问题描述 在Azure Cloud Service的实例中,收集到各种 Error Event 内容,本文针对所收集的三种Event进行解析. 1: This operation is not sup ...

  5. Advanced .Net Debugging 3：基本调试任务（上）

    一.简介 这是我的<Advanced .Net Debugging>这个系列的第三篇文章.这个系列的每篇文章写的周期都要很长,因为每篇文章都是原书的一章内容(太长的就会分开写).再者说,原 ...

  6. SpringCloud Eureka基本使用

    1. 简介 Eureka是Netflix开发的服务发现框架,并被Spring cloud 收录 并封装成为其服务治理的模块实现 Eureka采用了CS的架构设计,分为 Server端 和 Client ...

  7. Visual Studio部署C++环境下OpenCV库

      本文介绍在Visual Studio 2022中配置.编译C++计算机视觉库OpenCV的方法. 1 OpenCV库配置   首先,我们进行OpenCV库的下载与安装.作为一个开源的库,我们直接在 ...

  8. Gavvmal

    Gavvmal springboot 官方文档说明了两种方式,一种使用插件,直接生成docker镜像,但是这需要本地安装docker环境,但是无论用windows还是mac,本地安装docker都感觉 ...

  9. [学习笔记]Linux + Nginx环境下部署 Web 站点

    ​部署后端程序,请阅读: [学习笔记]Linux环境下部署 .Net5 程序 - 林晓lx - 博客园 (cnblogs.com) 打包项目 以Vue项目为例,首先打包站点,前往项目的根目录并键入: ...

  10. TornadoFx中的css美化

    原文地址:TornadoFx中的css美化 - Stars-One的杂货小窝 TornadoFx中使用类重新对css进行了封装,所以可以用代码的形式来书写样式 说明 除了Text,其他的若是要修改文字 ...