Javaweb开发-新冠疫情信息平台(前端)展示-V1.0版本

àì夳堔傛蜴生んèń 2022-10-24 13:29 142阅读 0赞

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

*  项目环境搭建
 *   *  前端界面

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

# 项目环境搭建 #

所需软件:

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

*MVC框架搭建：*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzOTE4MA_size_16_color_FFFFFF_t_70]

## 前端界面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzOTE4MA_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>新冠肺炎疫情信息平台</title>
    
    <link rel="stylesheet" href="css/epidemic.css">
    </head>
    <body>
    	
    	<div id="title">
    		<span class="china_title">全国疫情信息</span>  <a href="#"
    			class="world_title">全球疫情信息</a>
    	</div>
    	
    	<div id="time">2021年01月27日 星期三 16:48:35</div>
    	
    	<div id="left1">left-1</div>
    	
    	<div id="left2">left-2</div>
    	
    	<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>
    	
    	<div id="mid2">
    		<div id="china_map"></div>
    	</div>
    	
    	<div id="right1">right-1</div>
    	
    	<div id="right2">right-2</div>
    	
    	<footer>
    		By bjzhangjian    官网：<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;
    }

js:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzOTE4MA_size_16_color_FFFFFF_t_70 2]  
添加Echarts数据展示。  
具体查看Echarts的另一篇博文展示。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzOTE4MA_size_16_color_FFFFFF_t_70]: /images/20221024/2e91031a205443fda4c87fb6d3c6fd02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzOTE4MA_size_16_color_FFFFFF_t_70 1]: /images/20221024/44ae4ba3d20246f29b7214ae5c4e7cd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzOTE4MA_size_16_color_FFFFFF_t_70 2]: /images/20221024/ee552c4c657a44fc8c07b0cfc24a39f7.png