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

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

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

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

项目环境搭建

所需软件:

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

MVC框架搭建:
Javaweb开发-新冠疫情信息平台(前端)展示-V1.0版本_第1张图片

前端界面

Javaweb开发-新冠疫情信息平台(前端)展示-V1.0版本_第2张图片


<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:35div>
	
	<div id="left1">left-1div>
	
	<div id="left2">left-2div>
	
	<div id="mid1">
		<div class="num">
			<h1>8991h1>
		div>
		<div class="num">
			<h1>101232h1>
		div>
		<div class="num">
			<h1>88888h1>
		div>
		<div class="num">
			<h1>17690h1>
		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-1div>
	
	<div id="right2">right-2div>
	
	<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:
Javaweb开发-新冠疫情信息平台(前端)展示-V1.0版本_第3张图片
添加Echarts数据展示。
具体查看Echarts的另一篇博文展示。

你可能感兴趣的:(零基础项目,爬虫,html,css,java,mysql,大数据)