Javaweb开发-新冠疫情信息平台(前端)展示-V1.0版本_java 预警监控平台前端页面-CSDN博客

本文链接：https://blog.csdn.net/weixin_43639180/article/details/113408274

本文介绍了如何为新冠信息平台搭建环境，包括MVC框架、数据库（Mysql）、Jsoup库和Tomcat服务器。详细步骤展示了HTML结构、CSS样式和Echarts数据展示，适合初学者实战练习前端界面设计。

摘要由CSDN通过智能技术生成

新冠疫情信息平台展示-V1.0版本

项目环境搭建
- 前端界面

最近在带学生们写项目，简单就总结一下吧。有需要的初学者可以试着跟着写一下哈。实战一下。GoGoGo。。。

项目环境搭建

所需软件:

Mysql数据库
Jsoup.jar包
tomcat服务器

MVC框架搭建：
在这里插入图片描述

前端界面

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新冠肺炎疫情信息平台</title>
<!-- 引入外部的标签css  -->
<link rel="stylesheet" href="css/epidemic.css">
</head>
<body>
	<!-- 1、title -->
	<div id="title">
		<span class="china_title">全国疫情信息</span>&nbsp;&nbsp;<a href="#"
			class="world_title">全球疫情信息</a>
	</div>
	<!-- 2、时间：当前系统的时间 -->
	<div id="time">2021年01月27日 星期三 16:48:35</div>
	<!-- 3、left1 -->
	<div id="left1">left-1</div>
	<!-- 4、left2 -->
	<div id="left2">left-2</div>
	<!-- 5、mid1 -->
	<div id="mid1">
		<div class="num">
			<h1>8991</h1>
		</div>
		<div class="num">
			<h1>101232</h1>
		</div>
		<div class="num">
			<h1>88888</h1>
		</div>
		<div class="num">
			<h1>17690</h1>
		</div>
		<div class="txt">
			<h2>现存确诊</h2>
		</div>
		<div class="txt">
			<h2>累计确诊</h2>
		</div>
		<div class="txt">
			<h2>治愈</h2>
		</div>
		<div class="txt">
			<h2>死亡</h2>
		</div>
	</div>
	<!-- 6、mid2 -->
	<div id="mid2">
		<div id="china_map"></div>
	</div>
	<!-- 7、right1 -->
	<div id="right1">right-1</div>
	<!-- 8、right2 -->
	<div id="right2">right-2</div>
	<!-- 9、footer -->
	<footer>
		By bjzhangjian&nbsp;&nbsp;&nbsp; 官网：<a href="http://www.tedu.cn"
			target="_blank">达内官网</a>
	</footer>
</body>
</html>

CSS美化：


body{
	margin: 0;/* 外边距：控制盒子与盒子之间的距离。  */
	background-color: #333333;
}

#title{
	position: absolute;/* 绝对定位 */
	width: 40%;
	height: 10%;
	top: 0;/* 控制距离顶部的位置  */
	left: 30%;/* 控制距离左边的位置  */
	/* 设置字体大小 */
	font-size: 35px;
	color: white;
	/* 弹性布局：
		CSS3新引入的一个布局模式。
	 */
	display: flex;
	align-items: center;/* 交叉轴的中点对齐的样式  */
	justify-content: center;
}

.china_title{
	border-bottom: 3px solid #10AEB5;
	padding-bottom: 4px;
}
.world_title{
	font-size: 26px;
	color: gray;
	text-decoration: none;
}
/* 悬浮时候 */
a.world_title:hover{
	color: white;
	border-bottom: 3px solid #10AEB5;
	padding-bottom: 5px;
}
/* 
	time：
	绝对定位
	高度：10%
	距离顶部：5%
	右边：2%
	颜色：白色
	字体大小：20px;
 */
#time{
	position: absolute;
	height: 10%;
	top:5%;
	right: 2%;
	color: white;
	font-size: 20px;
}

#left1{
	position: absolute;
	width: 30%;
	height: 45%;
	top: 10%;
	left:0;
}
#left2{
	position: absolute;
	width: 30%;
	height: 45%;
	top: 55%;
	left:0;
}
/* 
	mid1:
	宽：40
	高：30
	顶部：10
	左边：30
	颜色：白色
 */
#mid1{
	position: absolute;
	width: 40%;
	height:30%;
	top:10%;
	left:30%;
	color:white;
}
/* 
	num和txt
 */
.num{
	width: 25%;
	float: left;
	/* 弹性布局：
		CSS3新引入的一个布局模式。
	 */
	display: flex;
	align-items: center;/* 交叉轴的中点对齐的样式  */
	justify-content: center;
	color: gold;
	font-size: 16px;
}
.txt{
	width: 25%;
	float: left;
	/* 弹性布局：
		CSS3新引入的一个布局模式。
	 */
	display: flex;
	align-items: center;/* 交叉轴的中点对齐的样式  */
	justify-content: center;
	/* font-family: "幼圆"; */
}

#mid2{
	position: absolute;
	width: 40%;
	height: 60%;
	top:40%;
	left:30%;
}
/* right1---right2 */
#right1{
	position: absolute;
	width: 30%;
	height: 45%;
	top:10%;
	right: 0;
}
#right2{
	position: absolute;
	width: 30%;
	height: 45%;
	top: 55%;
	right:0;
}

footer{
	position: absolute;
	width: 40%;
	height: 120px;
	top:100%;
	left:30%;
	text-align: center;
	font-size: 18px;
	/* 弹性布局：
		CSS3新引入的一个布局模式。
	 */
	display: flex;
	align-items: center;/* 交叉轴的中点对齐的样式  */
	justify-content: center;
}