世界疫情div界面搭建初步
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界面搭建初步的更多相关文章
- [.net 面向对象程序设计进阶] (25) 团队开发利器（四）分布式版本控制系统Git——使用GitStack+TortoiseGit 图形界面搭建Git环境
[.net 面向对象程序设计进阶] (25) 团队开发利器(四)分布式版本控制系统Git——使用GitStack+TortoiseGit 图形界面搭建Git环境 本篇导读: 前面介绍了两款代码管理工具 ...
- siebel 界面搭建
Siebel界面的初步搭建都是基于Siebel Tools工具来创建的,其搭建步骤: 1. 首先先创建一个Project项目,点击project--->点 new Record--->输入 ...
- mvc项目架构分享系列之架构搭建初步
mvc项目架构分享系列之架构搭建初步 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4.项目架构各部分解析 ...
- 1、IOS开发--iPad之仿制QQ空间（登录界面搭建+登录逻辑实现）
开始搭建登录界面 登录界面效果图: 相关的图片资源下载百度云备份链接: http://pan.baidu.com/s/1o71cvMU 密码: 2h7e 步骤开始: 设置辅助窗口的位置在下方 快捷键o ...
- 不等高cell的tableView界面搭建
一.搭建界面 1.界面分析 分析界面的层次结构,分析界面应该用什么控件来搭建 2.界面层次结构 分析之后,我们可以把这个界面分为四个模块(topView middleView commentView ...
- iOS彩票项目--第四天，新特性界面搭建，UICollectionViewController的初次使用
一.新特性界面搭建的思路: 在AppDelegate加载主窗体的时候进行判断程序版本号,直接进入程序或者进入新特性展示界面 取出当前的版本号,与旧的版本号相比较(旧的版本号在进入程序的时候存起来 =& ...
- 分布式版本控制系统Git——使用GitStack+TortoiseGit 图形界面搭建Git环境(服务器端及客户端)(转)
近期想改公司内部的源码管控从TFS为git,发现yubinfeng大侠有关git的超详细大作,现将其转载并记录下,以防忘记,其原博客中有更加详细的git及.net开发相关内容.原文地址:http:// ...
- Winform打砖块游戏制作step by step第一节---主界面搭建
一 引子 为了让更多的编程初学者,轻松愉快地掌握面向对象的思考方法,对象继承和多态的妙用,故推出此系列随笔,还望大家多多支持. 二 本节内容---主界面搭建 1.主界面截图 2. 该窗体主要包含了以下 ...
- Ubuntu服务器WDCP可视化界面搭建注意
title: Ubuntu服务器WDCP可视化界面搭建注意 前两天心血来潮,研究了下服务器搭建与部署. 领了个免费体验3天的vps服务器进行了实操. 在安装WDCP的时候遇到了些问题,网上大部分对问题 ...
- kafka-eagle监控界面搭建
kafka-eagle监控界面搭建 一.背景 二 .mac上安装kafka-eagle 1.安装JDK 2.安装eagle 1.下载eagle 2.解压并配置环境变量 3.启用kafka的JMX 4. ...
随机推荐
- JS实现提示文本框可输入剩余字数
最近在设计写博客功能时,涉及到留言框输入字数限制,需要给用户剩余数字提示. 参考文章:https://www.cnblogs.com/crazytrip/p/4968230.html 实现效果: 源码 ...
- Detours 的使用
Detours 是一个用于在 ARM, ARM64, X86, X64 和 IA64 机器上拦截二进制函数的库. Detours 最常用来拦截应用程序中的 win32 api 调用,比如添加调试工具. ...
- win32 - WriteProcessMemory的使用
使用这个api可以在指定的进程中将数据写入内存区域. 注意:以管理员权限运行,并且以x64调试. #include <windows.h> #include <iostream> ...
- 学习go语言编程之常量
什么在常量 在Golang中,常量是指在编译期就已知且不可改变的值. 字面常量 在程序中硬编码的常量值被称为字面常量,如: -12 // 整数类型常量 3.1415926 // 浮点类型常量 3.2+ ...
- 项目实战：Qt+iMax6生命探测仪（探测障碍物、静止目标、动态目标、生命目标、探测半径、探测前方雷达显示、动态目标轨迹显示、探测热力图、探测过程存储与回放）
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/110994486长期持续带来更多项目与技术分享, ...
- 【Java复健指南03】递归思想
[递归] 递归重要规则 1．执行一个方法时,就创建一个新的受保护的独立空间(栈空间) 方法的局部变量是独立的,不会相互影响,比如n变量 如果方法中使用的是引用类型变量(比如数组,对象),就会共享该引用 ...
- 在矩池云上使用R和RStudio
租用机器 在矩池云租用机器的时候,系统环境里搜索:R,选择 R4.2 镜像,如果需要使用RStudio,还需要在高级选项中新增一个自定义端口:8787,然后点击租用即可. 使用 JupyterLab ...
- [Rust] 数据类型的转换
数据类型的转换 类型转换的方式 Rust 提供了多种类型转换的方式. as T 用于数类型之间的转换.ixx, uxx, fxx 都可以. 注意:当溢出的时候,转换不会 panic,而是循环映射值. ...
- Long和int比较用==还是用equals
应该用==,因为equels会先比较类型,这样值一样的不同类型的数字就直接返回false啦.看源码吧. public boolean equals(Object obj) { System.out.p ...
- python代码，读取一个txt文件，将其中的每一行开头加上一个字母a,每一行的结尾加上一个字母b
with open('name.txt', 'r+') as file: lines = file.readlines() file.seek(0) # 将文件指针移回文件开头 file.trunca ...