疫情防控网
摘 要
很多年后，当人们回顾抗击新冠肺炎疫情这场战争时，一定会想起关于2020年年初，新冠肺炎来袭，武汉发生关闭离汉通道的那个遥远日子。不仅仅是武汉，全中国甚至国外都发生了新冠肺炎疫情，随着武汉关闭而开启的，是一场疫情防控的全人民战争，也是一切的开端。因此本文设计了疫情防控网，我们疫情防控网该如何在众多网页中脱颖而出也是一项难题，如何让人们了解到有我们疫情防控网的存在，考虑如何满足大众的需求，如何让人们更直观更简单的方式可以了解该网页，这都是设计该网页的重中之重。
同时疫情防控网会给您带来更具体的防疫数据，可以让用户更好的了解到国内国外发生的疫情，人们也可以在该网页上投稿，讲出疫情当中身边的真人真事，让更多的人了知道平民英雄的存在，在网页最后还可以给本网站提出您自己的意见或者看法。本网站会吸取不足，相结合网友的意见和看法做出改变，做得更好。同时本网站也会进行实时更新，让网友更清楚的了解到全国疫情的最新动态。只有您更多的需求，我们才有前进的动力，更加全面的将该网页做的更大。本文结合了开发者的设计思路及设计目标，阐述了用户建议的重要性，并以不足加以改进，从各方面分析满足用户的体验，以拥有前端设计为原则。
关键词：HTML5+JAVA 关于疫情防控网的设计与实现 实时更新
目 录
距离疫情过去差不多有两年了，但直至今日疫情还没有完全消失，我们依然需要戴着口罩行走在路上。我们依然还能在各种软件上搜索到关于疫情的消息。由此，一个关于疫情的网页就设计出来了，基础功能已经实现，后续再有需要也可以再次添加完善各种功能，由您指出不足之处，我们再加以改正。同时本网页的各个功能都是免费的，可以放心使用，如果有什么意见或看法可以在网页的留言处留言，我们都会为您一一解答。
互联网是传播信息的方式之一，它的特点就是迅速，便捷，普及性。随着互联网的发展，各式各样的网站开始诞生，功能齐全紧跟时代的变化，为企业进行宣传和营销，同时也可以为传统文化的传承进行保护，也注入新时代的活力。
本网站主要任务是制作一个关于疫情的网页，并实现留言版功能，任何人都可以登录我们的网站。我们制作网页初衷就是向大众更好的呈现疫情期间的疫情数据，有一个更直观的了解。本网页的模块分为五个页面，分别是：首页，图片记忆，更多相关版，新闻资讯，留言版。每个页面都详细的描写了与疫情相关材料，首页是做了一个轮播图，还有插入了一条视频可以了解疫情的现状，在页面最底端还拥有一个专属logo；图片记忆是插入了许多图片，都是疫情当中真实的故事；更多相关页面同时也拥有子页面，留言版是本网站的一个特点，用户可以通过此处表达自己的意见或看法，网页还设置了管理员权限，管理员可以对用户的留言进行回复，我们的宗旨就是让用户用的舒心，看的放心。
定位：向广大用户提供疫情具体数据
风格：实时更新疫情，实用性强
用户人群：人民群众
产品：目前只有前端，处于试行阶段，后续如有需要，可开发后端功能
首先我们得了解用户的需求，才能做出下一步的规划。成功建立起本网页需要查阅大量的资料，一方面可以用来丰富本网页，另一方面又可以提供给用户他们所需要的资源。
我们已经熟练的掌握了HTML5网页设计和各标签的用法，以及JAVA的使用。通过这些可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，这种组织信息方式将分布在不同的位置的信息资源用随机方式进行连接，为人们提供查找、搜索信息处于方便当中，同时我们在一定程度上具备了制作简单网页项目的能力。
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。其主要功能：1.嵌入动态文本到HTML页面。2.对浏览器事件做出响应。3.读写HTML元素。4.在数据被提交到服务器之前验证数据。5.检测访客的浏览信息。6.基于Node.js技术进行服务器端编程。
主页界面如下：首先得有一个大概的设计思路，根据设计的思路规划大体框架，整理好所需要的图片资料等信息。主页是展现一个网站的重中之重，根据大众读者的阅读习惯将导航条、各功能以及内容进行分隔，既要注重色彩的搭配也要协调整体之间的主次关系。对于其他网页的颜色鲜明，本网页采用的色彩就比较单一，同时还在中间运用了视频等素材，在网页的最下面还有关于网页的专属logo，在其旁边还有微博、微信等标识，可以通过这些渠道登录此网页。
1.分别建立几个界面的模板
1.index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>关于疫情</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/js.js"></script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
</head>
<body>
<div class="top">
<div class="logo"><a href="index.html"><img src="images/logo.png" width="140" height="51"></a></div>
</div>
<!-- 横向导航开始 -->
<div class="bar-h42">
<div id="bar" class="clear">
<ul>
<li><a href="index.html">回到首页</a></li>
<li><a href="photos.html">图片记忆</a></li>
<li><a href="#">更多相关 <img src="images/down.svg" width="10" height="10"></a>
<ul>
<li><a href="page1.html">英雄人物</a></li>
<li><a href="page2.html">全球现状</a></li>
<li><a href="video.html">国内疫情</a></li>
</ul></li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="message.html">给我留言</a></li>
</ul>
<div class="search"><input type="text" value=" 搜索"></div>
</div>
</div>
<!-- 横向导航END -->
<!-- 轮播banner开始 -->
<div id="banner1">
<div id="picbox">
<div id="pic1" class="pics"></div>
<div id="pic2" class="pics"></div>
<div id="pic3" class="pics"></div>
<div id="pic4" class="pics"></div>
<div id="pic5" class="pics"></div>
</div>
<div id="nav">
<li id="navli1" class="anvli navnow" value="1"></li>
<li id="navli2" class="anvli" value="2"></li>
<li id="navli3" class="anvli" value="3"></li>
<li id="navli4" class="anvli" value="4"></li>
<li id="navli5" class="anvli" value="5"></li>
</div>
<div id="pre" class="hbut"></div>
<div id="next" class="hbut"></div>
</div>
<!-- 轮播banner 结束 -->
<div class="main">
<div class="video">
<div class="video-img"><a href="video.html"><img src="images/main01.jpg" alt="" width="581" height="339"></a></div>
<div id="video-icon"><a href="video.html" class="white">Click to play video</a></div>
</div>
<div class="main-text">
<span class="abigyahei2">关 / 于 / 疫 / 情</span><br>
世界卫生组织（WHO）宣布，将新型冠状病毒疫情列为国际关注的突发公共卫生事件（PHEIC）。 [4] 世界卫生组织3月11日表示，新冠肺炎疫情的爆发已经构成一次全球性“大流行”。10月8日，中国同全球疫苗免疫联盟签署协议，正式加入“新冠肺炎疫苗实施计划”。</div>
</div>
<div id="index-iamges"><table width="100%" border="0">
<tr>
<td height="312" align="center">HAVE A NICE DAY<br><input type="text" id="clock" size="50" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</script>
</form></td>
</tr>
</table>
</div>
<div class="d-x-3">
<div class="d-x-3-1"><span class="abigyahei2">截至2021年2月25日</span><br>
<br>
<span class="abigyahei3">全国累计报告接种新冠病毒疫苗超过一亿剂次 。4月，中国疾病预防控制中心专家表示：新冠病毒疫苗过敏的比例不高，“过敏体质”、备孕者均可以接种 。4月12日报道，中国建免疫屏障或需10亿人接种疫苗 </span></div>
<div class="gotop"><a href="#top"><img src="images/gotop.png" width="114" height="35"></a></div>
</div>
<div class="footer">
<div class="down"><table width="100%" border="0">
<tr>
<td width="17%" height="161"><a href="index.html"><img src="images/logo1.png" alt="" width="140" height="51"></a></td>
<td width="20%"><a href="#top" class="white">返回顶部</a></td>
<td width="32%" align="center">Copyright © 版权所有 ICP备0000000号 </td>
<td width="14%"> </td>
<td width="17%"><a href="#"><img src="images/douyin.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weibo.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weixin.png" alt="" width="31" height="31"></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>关于疫情</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
a {
font-family: "微软雅黑";
}
.top {
height: 72px;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #efefee;
}
.top .logo {
height: 51px;
width: 140px;
margin-right: auto;
margin-left: auto;
padding-top: 12px;
}
.bar-h42 {
height: 42px;
background-color: #f8f8f8;
font-family: "微软雅黑";
font-size: 14px;
color: #666;
position: relative;
z-index: 999;
left: auto;
right: auto;
}
ul,li{
margin:0px;
padding:0px;
list-style-type:none;}
/*横向向导航开始*/
#bar{
width:1150px;
margin:0px auto;
}
.contents {
font-family: "微软雅黑";
font-size: 14px;
line-height: 32px;
color: #333;
height: 1550px;
width: 1150px;
margin-right: auto;
margin-left: auto;
border: 1px solid #e6e6e6;
}
.footer {
height: 280px;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: #3e3e3e;
margin-top: 70px;
}
.footer .down {
height: 160px;
width: 1030px;
margin-right: auto;
margin-left: auto;
padding: 60px;
font-family: "微软雅黑";
font-size: 13px;
color: #cccccc;
}
.footer .down img:hover {
opacity : 0.800000011920928955078125;
}
#bar ul li{
width:135px;
height:42px;
text-align:center;
line-height:40px;
background-color: #f8f8f8;
float:left;}
.bar-h42 #bar .search {
float: left;
height: 26px;
width: 150px;
padding-top: 8px;
padding-left: 318px;
}
.bar-h42 #bar .search input {
height: 22px;
width: 150px;
font-family: "微软雅黑";
font-size: 13px;
color: #969696;
border-radius: 32px;
border: 1px solid #c8c8c8;
}
#bar ul li ul{
display:none;
margin-left:-1px;}
#bar ul li:hover ul{display:block;}
#bar ul li:hover{
background-color: #e1e1e1;
}
.clear::after{
content:"";
display:block;
clear:both;}
/*横向导航END*/
a:link {
color: #686868;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #686868;
}
a:hover {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
}
a.white:link {
color: #FFF;
text-decoration: none;
}
a.white:visited {
text-decoration: none;
color: #FFF;
}
a.white:hover {
text-decoration: none;
color: #c8c8c8;
}
.dahei {
font-family: "微软雅黑";
font-size: 28px;
font-weight: bold;
color: #000;
}
a.white:active {
text-decoration: none;
}
</style>
<script type="text/javascript">
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
</script>
</head>
<body>
<div class="top">
<div class="logo"><a href="index.html"><img src="images/logo.png" width="140" height="51"></a></div>
</div>
<!-- 横向导航开始 -->
<div class="bar-h42">
<div id="bar" class="clear">
<ul>
<li><a href="index.html">回到首页</a></li>
<li><a href="photos.html">图片记忆</a></li>
<li><a href="#">更多相关 <img src="images/down.svg" alt="" width="10" height="10"></a>
<ul>
<li><a href="page1.html">英雄人物</a></li>
<li><a href="page2.html">全球现状</a></li>
<li><a href="video.html">国内疫情</a></li>
</ul>
</li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="message.html">给我留言</a></li>
</ul>
<div class="search">
<input type="text" value=" 搜索">
</div>
</div>
</div>
<!-- 横向导航END -->
<div class="contents">
<table width="100%" border="0">
<tr>
<td><img src="images/gg1.jpg" width="1148" height="438"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="74" align="center"><table width="1022" border="0">
<tr>
<td height="762" align="center" valign="top"><a href="index.html"><br>
<br>
</a>
<p>请在这里写下对我们的意见和看法，或者说出您的故事跟我们分享，我们期待您的来临<br>
打*号的项目为必填内容，否则将无法发送。您输入的信息，仅用于回复您的提问和建议之上。</p>
<hr>
<div>
<div>
<label for="contact_name"><abbr title="必填字段">*</abbr> 姓名</label>
<div>
<input type="text" name="contact[name]" id="contact_name">
</div>
</div>
<div>
<label><abbr title="必填字段">*</abbr> 性别</label>
<div>
<label for="contact_gender_1">
<input type="radio" value="1" name="contact[gender]" id="contact_gender_1">
男</label>
<label for="contact_gender_2">
<input type="radio" value="2" name="contact[gender]" id="contact_gender_2">
女</label>
</div>
</div>
<div>
<label for="contact_address">地址</label>
<div>
<input type="text" name="contact[address]" id="contact_address">
</div>
</div>
<div>
<label for="contact_tel"><abbr title="必填字段">*</abbr> 电话</label>
<div>
<input type="text" name="contact[tel]" id="contact_tel">
</div>
</div>
<div>
<label for="contact_email"><abbr title="必填字段">*</abbr> E-mail</label>
<div>
<input type="email" name="contact[email]" id="contact_email">
</div>
</div>
<div>
<label><abbr title="必填字段">*</abbr> 咨询或投诉类别</label>
<div>
<label for="contact_contact_type_">
<input id="t1" type="checkbox" value="商品" name="contact[contact_type][]">
新闻</label>
<label for="contact_contact_type_">
<input id="t2" type="checkbox" value="服务" name="contact[contact_type][]">
留言</label>
<label for="contact_contact_type_">
<input id="t3" type="checkbox" value="清洁" name="contact[contact_type][]">
合作</label>
<label for="contact_contact_type_">
<input id="t4" type="checkbox" value="关于加盟店" name="contact[contact_type][]">
关于我们</label>
<label for="contact_contact_type_">
<input id="t5" type="checkbox" value="其它" name="contact[contact_type][]">
其它</label>
</div>
</div>
<div>
<label for="contact_city"><abbr title="必填字段">*</abbr> 城市</label>
<div>
<select name="contact[city]" id="contact_city">
<option value=""></option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
<option value="宁波">宁波</option>
<option value="温州">温州</option>
<option value="绍兴">绍兴</option>
<option value="湖州">湖州</option>
<option value="嘉兴">嘉兴</option>
<option value="金华">金华</option>
<option value="衢州">衢州</option>
<option value="台州">台州</option>
<option value="丽水">丽水</option>
<option value="舟山">舟山</option>
<option value="常熟">常熟</option>
<option value="常州">常州</option>
<option value="丹阳">丹阳</option>
<option value="江阴">江阴</option>
<option value="昆山">昆山</option>
<option value="南京">南京</option>
<option value="绍兴">绍兴</option>
<option value="苏州">苏州</option>
<option value="泰州">泰州</option>
<option value="无锡">无锡</option>
<option value="扬州">扬州</option>
<option value="张家港">张家港</option>
<option value="镇江">镇江</option>
<option value="诸暨">诸暨</option>
</select>
</div>
</div>
<div>
<label for="contact_shop_name"><abbr title="必填字段">*</abbr> 店铺名称</label>
<div>
<input type="text" name="contact[shop_name]" id="contact_shop_name">
</div>
</div>
<div>
<label for="contact_is_need_reply">是否需要我们答复</label>
<div>
<label>
<input type="checkbox" value="1" name="contact[is_need_reply]" id="contact_is_need_reply">
</label>
</div>
</div>
<div>
<label for="contact_body"><abbr title="必填字段">*</abbr> 内容<br>
(1000字以内)</label>
<div>
<textarea name="contact[body]" id="contact_body"></textarea>
</div>
</div>
</div>
<div>
<br>
<a href="index.html"><br>
</a>
<input name="button" type="submit" id="button" onClick="MM_popupMsg('提交成功~');MM_goToURL('parent','index.html');return document.MM_returnValue" value="提交">
<br>
<br></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div class="footer">
<div class="down"><table width="100%" border="0">
<tr>
<td width="17%" height="161"><a href="index.html"><img src="images/logo1.png" alt="" width="140" height="51"></a></td>
<td width="20%"><a href="#top" class="white">返回顶部</a></td>
<td width="32%" align="center">Copyright © 版权所有 ICP备0000000号 </td>
<td width="14%"> </td>
<td width="17%"><a href="#"><img src="images/douyin.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weibo.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weixin.png" alt="" width="31" height="31"></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
3.message.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>关于疫情</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
a {
font-family: "微软雅黑";
}
.top {
height: 72px;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #efefee;
}
.top .logo {
height: 51px;
width: 140px;
margin-right: auto;
margin-left: auto;
padding-top: 12px;
}
.bar-h42 {
height: 42px;
background-color: #f8f8f8;
font-family: "微软雅黑";
font-size: 14px;
color: #666;
position: relative;
z-index: 999;
left: auto;
right: auto;
}
ul,li{
margin:0px;
padding:0px;
list-style-type:none;}
/*横向向导航开始*/
#bar{
width:1150px;
margin:0px auto;
}
.contents {
font-family: "微软雅黑";
font-size: 14px;
line-height: 32px;
color: #333;
height: 1550px;
width: 1150px;
margin-right: auto;
margin-left: auto;
border: 1px solid #e6e6e6;
}
.footer {
height: 280px;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: #3e3e3e;
margin-top: 70px;
}
.footer .down {
height: 160px;
width: 1030px;
margin-right: auto;
margin-left: auto;
padding: 60px;
font-family: "微软雅黑";
font-size: 13px;
color: #cccccc;
}
.footer .down img:hover {
opacity : 0.800000011920928955078125;
}
#bar ul li{
width:135px;
height:42px;
text-align:center;
line-height:40px;
background-color: #f8f8f8;
float:left;}
.bar-h42 #bar .search {
float: left;
height: 26px;
width: 150px;
padding-top: 8px;
padding-left: 318px;
}
.bar-h42 #bar .search input {
height: 22px;
width: 150px;
font-family: "微软雅黑";
font-size: 13px;
color: #969696;
border-radius: 32px;
border: 1px solid #c8c8c8;
}
#bar ul li ul{
display:none;
margin-left:-1px;}
#bar ul li:hover ul{display:block;}
#bar ul li:hover{
background-color: #e1e1e1;
}
.clear::after{
content:"";
display:block;
clear:both;}
/*横向导航END*/
a:link {
color: #686868;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #686868;
}
a:hover {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
}
a.white:link {
color: #FFF;
text-decoration: none;
}
a.white:visited {
text-decoration: none;
color: #FFF;
}
a.white:hover {
text-decoration: none;
color: #c8c8c8;
}
.dahei {
font-family: "微软雅黑";
font-size: 28px;
font-weight: bold;
color: #000;
}
a.white:active {
text-decoration: none;
}
</style>
<script type="text/javascript">
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
</script>
</head>
<body>
<div class="top">
<div class="logo"><a href="index.html"><img src="images/logo.png" width="140" height="51"></a></div>
</div>
<!-- 横向导航开始 -->
<div class="bar-h42">
<div id="bar" class="clear">
<ul>
<li><a href="index.html">回到首页</a></li>
<li><a href="photos.html">图片记忆</a></li>
<li><a href="#">更多相关 <img src="images/down.svg" alt="" width="10" height="10"></a>
<ul>
<li><a href="page1.html">英雄人物</a></li>
<li><a href="page2.html">全球现状</a></li>
<li><a href="video.html">国内疫情</a></li>
</ul>
</li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="message.html">给我留言</a></li>
</ul>
<div class="search">
<input type="text" value=" 搜索">
</div>
</div>
</div>
<!-- 横向导航END -->
<div class="contents">
<table width="100%" border="0">
<tr>
<td><img src="images/gg1.jpg" width="1148" height="438"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="74" align="center"><table width="1022" border="0">
<tr>
<td height="762" align="center" valign="top"><a href="index.html"><br>
<br>
</a>
<p>请在这里写下对我们的意见和看法，或者说出您的故事跟我们分享，我们期待您的来临<br>
打*号的项目为必填内容，否则将无法发送。您输入的信息，仅用于回复您的提问和建议之上。</p>
<hr>
<div>
<div>
<label for="contact_name"><abbr title="必填字段">*</abbr> 姓名</label>
<div>
<input type="text" name="contact[name]" id="contact_name">
</div>
</div>
<div>
<label><abbr title="必填字段">*</abbr> 性别</label>
<div>
<label for="contact_gender_1">
<input type="radio" value="1" name="contact[gender]" id="contact_gender_1">
男</label>
<label for="contact_gender_2">
<input type="radio" value="2" name="contact[gender]" id="contact_gender_2">
女</label>
</div>
</div>
<div>
<label for="contact_address">地址</label>
<div>
<input type="text" name="contact[address]" id="contact_address">
</div>
</div>
<div>
<label for="contact_tel"><abbr title="必填字段">*</abbr> 电话</label>
<div>
<input type="text" name="contact[tel]" id="contact_tel">
</div>
</div>
<div>
<label for="contact_email"><abbr title="必填字段">*</abbr> E-mail</label>
<div>
<input type="email" name="contact[email]" id="contact_email">
</div>
</div>
<div>
<label><abbr title="必填字段">*</abbr> 咨询或投诉类别</label>
<div>
<label for="contact_contact_type_">
<input id="t1" type="checkbox" value="商品" name="contact[contact_type][]">
新闻</label>
<label for="contact_contact_type_">
<input id="t2" type="checkbox" value="服务" name="contact[contact_type][]">
留言</label>
<label for="contact_contact_type_">
<input id="t3" type="checkbox" value="清洁" name="contact[contact_type][]">
合作</label>
<label for="contact_contact_type_">
<input id="t4" type="checkbox" value="关于加盟店" name="contact[contact_type][]">
关于我们</label>
<label for="contact_contact_type_">
<input id="t5" type="checkbox" value="其它" name="contact[contact_type][]">
其它</label>
</div>
</div>
<div>
<label for="contact_city"><abbr title="必填字段">*</abbr> 城市</label>
<div>
<select name="contact[city]" id="contact_city">
<option value=""></option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
<option value="宁波">宁波</option>
<option value="温州">温州</option>
<option value="绍兴">绍兴</option>
<option value="湖州">湖州</option>
<option value="嘉兴">嘉兴</option>
<option value="金华">金华</option>
<option value="衢州">衢州</option>
<option value="台州">台州</option>
<option value="丽水">丽水</option>
<option value="舟山">舟山</option>
<option value="常熟">常熟</option>
<option value="常州">常州</option>
<option value="丹阳">丹阳</option>
<option value="江阴">江阴</option>
<option value="昆山">昆山</option>
<option value="南京">南京</option>
<option value="绍兴">绍兴</option>
<option value="苏州">苏州</option>
<option value="泰州">泰州</option>
<option value="无锡">无锡</option>
<option value="扬州">扬州</option>
<option value="张家港">张家港</option>
<option value="镇江">镇江</option>
<option value="诸暨">诸暨</option>
</select>
</div>
</div>
<div>
<label for="contact_shop_name"><abbr title="必填字段">*</abbr> 店铺名称</label>
<div>
<input type="text" name="contact[shop_name]" id="contact_shop_name">
</div>
</div>
<div>
<label for="contact_is_need_reply">是否需要我们答复</label>
<div>
<label>
<input type="checkbox" value="1" name="contact[is_need_reply]" id="contact_is_need_reply">
</label>
</div>
</div>
<div>
<label for="contact_body"><abbr title="必填字段">*</abbr> 内容<br>
(1000字以内)</label>
<div>
<textarea name="contact[body]" id="contact_body"></textarea>
</div>
</div>
</div>
<div>
<br>
<a href="index.html"><br>
</a>
<input name="button" type="submit" id="button" onClick="MM_popupMsg('提交成功~');MM_goToURL('parent','index.html');return document.MM_returnValue" value="提交">
<br>
<br></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div class="footer">
<div class="down"><table width="100%" border="0">
<tr>
<td width="17%" height="161"><a href="index.html"><img src="images/logo1.png" alt="" width="140" height="51"></a></td>
<td width="20%"><a href="#top" class="white">返回顶部</a></td>
<td width="32%" align="center">Copyright © 版权所有 ICP备0000000号 </td>
<td width="14%"> </td>
<td width="17%"><a href="#"><img src="images/douyin.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weibo.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weixin.png" alt="" width="31" height="31"></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
4.newa.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>关于疫情</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
a {
font-family: "微软雅黑";
}
.top {
height: 72px;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #efefee;
}
.top .logo {
height: 51px;
width: 140px;
margin-right: auto;
margin-left: auto;
padding-top: 12px;
}
.bar-h42 {
height: 42px;
background-color: #f8f8f8;
font-family: "微软雅黑";
font-size: 14px;
color: #666;
position: relative;
z-index: 999;
left: auto;
right: auto;
}
ul,li{
margin:0px;
padding:0px;
list-style-type:none;}
/*横向向导航开始*/
#bar{
width:1150px;
margin:0px auto;
}
.contents {
font-family: "微软雅黑";
font-size: 14px;
line-height: 32px;
color: #333;
height: 650px;
width: 1150px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
border: 1px solid #f2f2f2;
}
.footer {
height: 280px;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: #3e3e3e;
margin-top: 70px;
}
.footer .down {
height: 160px;
width: 1030px;
margin-right: auto;
margin-left: auto;
padding: 60px;
font-family: "微软雅黑";
font-size: 13px;
color: #cccccc;
}
.footer .down img:hover {
opacity : 0.800000011920928955078125;
}
#bar ul li{
width:135px;
height:42px;
text-align:center;
line-height:40px;
background-color: #f8f8f8;
float:left;}
.bar-h42 #bar .search {
float: left;
height: 26px;
width: 150px;
padding-top: 8px;
padding-left: 318px;
}
.bar-h42 #bar .search input {
height: 22px;
width: 150px;
font-family: "微软雅黑";
font-size: 13px;
color: #969696;
border-radius: 32px;
border: 1px solid #c8c8c8;
}
#bar ul li ul{
display:none;
margin-left:0px;}
#bar ul li:hover ul{display:block;}
#bar ul li:hover{
background-color: #e1e1e1;
}
.clear::after{
content:"";
display:block;
clear:both;}
/*横向导航END*/
a:link {
color: #686868;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #686868;
}
a:hover {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
}
a.white:link {
color: #FFF;
text-decoration: none;
}
a.white:visited {
text-decoration: none;
color: #FFF;
}
a.white:hover {
text-decoration: none;
color: #c8c8c8;
}
.dahei {
font-family: "微软雅黑";
font-size: 28px;
font-weight: bold;
color: #000;
}
a.white:active {
text-decoration: none;
}
.contents .B-title {
height: 43px;
width: 180px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
font-family: "微软雅黑";
font-size: 18px;
line-height: 43px;
font-weight: bold;
color: #000;
text-align: center;
border-radius: 52px;
background-color: #f4f4f4;
letter-spacing: 2px;
border: 1px solid #FFF;
}
.contents .B-title:hover {
border: 1px solid #e2e2e2;
}
.contents .division {
height: 50px;
width: 180px;
margin-right: auto;
margin-left: auto;
}
.contents #N-body {
height: 310px;
width: 850px;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
background-color: #f7f7f7;
border-radius: 10px;
border: 1px solid #FFF;
padding: 45px;
font-family: "微软雅黑";
font-size: 13px;
line-height: 40px;
color: #000;
}
.contents #N-body:hover {
border: 1px solid #e2e2e2;
}
</style>
</head>
<body>
<div class="top">
<div class="logo"><a href="index.html"><img src="images/logo.png" width="140" height="51"></a></div>
</div>
<!-- 横向导航开始 -->
<div class="bar-h42">
<div id="bar" class="clear">
<ul>
<li><a href="index.html">回到首页</a></li>
<li><a href="photos.html">图片记忆</a></li>
<li><a href="#">更多相关 <img src="images/down.svg" alt="" width="10" height="10"></a>
<ul>
<li><a href="page1.html">英雄人物</a></li>
<li><a href="page2.html">全球现状</a></li>
<li><a href="video.html">国内疫情</a></li>
</ul>
</li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="message.html">给我留言</a></li>
</ul>
<div class="search">
<input type="text" value=" 搜索">
</div>
</div>
</div>
<!-- 横向导航END -->
<div class="contents">
<div class="division"></div>
<div class="B-title">新闻资讯</div>
<div id="N-body"><table width="97%" border="0">
<tr>
<td height="309" align="center"><table width="80%" border="0">
<tr>
<td><a href="#">哈尔滨最新疫情通报</a><br>
<a href="#">国际奥委会:北京冬奥会不会因疫情推迟</a><br>
<a href="#">3起本土疫情,山东1市今晨发布紧急提醒!</a><br>
<a href="#">新型冠状病毒肺炎疫情情况!福州最新通告!</a><br>
<a href="#">上虞、萧山疫溯源结果最新进展如何?</a><br>
<a href="#">这个冬天,疫情为何“此起彼伏,多点散发”</a><br>
<a href="#">如果明年疫情结束,你准备好如何投资了吗?</a></td>
</tr>
</table></td>
<td align="center"><table width="80%" border="0">
<tr>
<td><a href="#">快速阻断疫情传播链!浙江各地落实落细防控举措</a><br>
<a href="#">国际奥委会:北京冬奥会不会因疫情推迟</a><br>
<a href="#">3起本土疫情,山东1市今晨发布紧急提醒!</a><br>
<a href="#">18例阳性!深夜通报:此地3天3起本土疫情!</a><br>
<a href="#">上虞、萧山疫溯源结果最新进展如何?</a><br>
<a href="#">严防疫情输入!刚刚,青岛市疾控中心发布紧急提醒</a><br>
<a href="#">世界疫情不灭,我们日常防控不能少</a></td>
</tr>
</table></td>
</tr>
</table>
</div>
</div>
<div class="footer">
<div class="down"><table width="100%" border="0">
<tr>
<td width="17%" height="161"><a href="index.html"><img src="images/logo1.png" alt="" width="140" height="51"></a></td>
<td width="20%"><a href="#top" class="white">返回顶部</a></td>
<td width="32%" align="center">Copyright © 版权所有 ICP备0000000号 </td>
<td width="14%"> </td>
<td width="17%"><a href="#"><img src="images/douyin.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weibo.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weixin.png" alt="" width="31" height="31"></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
5.page1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>关于疫情</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
a {
font-family: "微软雅黑";
}
.top {
height: 72px;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #efefee;
}
.top .logo {
height: 51px;
width: 140px;
margin-right: auto;
margin-left: auto;
padding-top: 12px;
}
.bar-h42 {
height: 42px;
background-color: #f8f8f8;
font-family: "微软雅黑";
font-size: 14px;
color: #666;
position: relative;
z-index: 999;
left: auto;
right: auto;
}
ul,li{
margin:0px;
padding:0px;
list-style-type:none;}
/*横向向导航开始*/
#bar{
width:1150px;
margin:0px auto;
}
.contents {
font-family: "微软雅黑";
font-size: 14px;
line-height: 32px;
color: #333;
height: 650px;
width: 1150px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
border: 1px solid #f2f2f2;
}
.footer {
height: 280px;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: #3e3e3e;
margin-top: 70px;
}
.footer .down {
height: 160px;
width: 1030px;
margin-right: auto;
margin-left: auto;
padding: 60px;
font-family: "微软雅黑";
font-size: 13px;
color: #cccccc;
}
.footer .down img:hover {
opacity : 0.800000011920928955078125;
}
#bar ul li{
width:135px;
height:42px;
text-align:center;
line-height:40px;
background-color: #f8f8f8;
float:left;}
.bar-h42 #bar .search {
float: left;
height: 26px;
width: 150px;
padding-top: 8px;
padding-left: 318px;
}
.bar-h42 #bar .search input {
height: 22px;
width: 150px;
font-family: "微软雅黑";
font-size: 13px;
color: #969696;
border-radius: 32px;
border: 1px solid #c8c8c8;
}
#bar ul li ul{
display:none;
margin-left:0px;}
#bar ul li:hover ul{display:block;}
#bar ul li:hover{
background-color: #e1e1e1;
}
.clear::after{
content:"";
display:block;
clear:both;}
/*横向导航END*/
a:link {
color: #686868;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #686868;
}
a:hover {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
}
a.white:link {
color: #FFF;
text-decoration: none;
}
a.white:visited {
text-decoration: none;
color: #FFF;
}
a.white:hover {
text-decoration: none;
color: #c8c8c8;
}
.dahei {
font-family: "微软雅黑";
font-size: 28px;
font-weight: bold;
color: #000;
}
a.white:active {
text-decoration: none;
}
.contents .B-title {
height: 43px;
width: 180px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
font-family: "微软雅黑";
font-size: 18px;
line-height: 43px;
font-weight: bold;
color: #000;
text-align: center;
border-radius: 52px;
background-color: #f4f4f4;
letter-spacing: 2px;
border: 1px solid #FFF;
}
.contents .B-title:hover {
border: 1px solid #e2e2e2;
}
.contents .division {
height: 50px;
width: 180px;
margin-right: auto;
margin-left: auto;
}
.contents #N-body {
height: 310px;
width: 850px;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
background-color: #f7f7f7;
border-radius: 10px;
border: 1px solid #FFF;
padding: 45px;
font-family: "微软雅黑";
font-size: 13px;
line-height: 30px;
color: #000;
}
.contents #N-body:hover {
border: 1px solid #e2e2e2;
}
</style>
</head>
<body>
<div class="top">
<div class="logo"><a href="index.html"><img src="images/logo.png" width="140" height="51"></a></div>
</div>
<!-- 横向导航开始 -->
<div class="bar-h42">
<div id="bar" class="clear">
<ul>
<li><a href="index.html">回到首页</a></li>
<li><a href="photos.html">图片记忆</a></li>
<li><a href="#">更多相关 <img src="images/down.svg" alt="" width="10" height="10"></a>
<ul>
<li><a href="page1.html">英雄人物</a></li>
<li><a href="page2.html">全球现状</a></li>
<li><a href="video.html">国内疫情</a></li>
</ul>
</li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="message.html">给我留言</a></li>
</ul>
<div class="search">
<input type="text" value=" 搜索">
</div>
</div>
</div>
<!-- 横向导航END -->
<div class="contents">
<div class="division"></div>
<div class="B-title">钟南山</div>
<div id="N-body"><table width="97%" border="0">
<tr>
<td width="43%" height="309" align="right" valign="top"><img src="images/list01.jpg" width="310" height="310"></td>
<td width="57%" align="right"><table width="80%" border="0">
<tr>
<td>在2003年我国SARS疫情中，他明确了广东的病原学，组织了广东省SARS防治研究，
创建了“合理使用皮质激素，合理使用无创通气，合理治疗并发症”的方法治疗危重SARS患者，获国际上的存活率（96.2%）。
组织整理了国内支气管哮喘、慢性阻塞性肺疾病、咳嗽、SARS、人高致病性禽流感等方面的诊治指南文件。
2013年任广东省H7N9防控专家组组长，并将H7N9系列研究发表在《New England Journal Medicine》（IF51.658）上，
对H7N9防控做出重要贡献。2015年成功治愈广州首例H5N6患者。曾荣获全国先进工作者，全国五一劳动奖章等荣誉称号。
2020年年初，武汉告急，面对新冠肺炎疫情的爆发，83岁的钟南山再次出现在疫情防控的最前线，收拾行囊奔赴武汉，他是我们国民的英雄，挽救无数的生命。</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<div class="down"><table width="100%" border="0">
<tr>
<td width="17%" height="161"><a href="index.html"><img src="images/logo1.png" alt="" width="140" height="51"></a></td>
<td width="20%"><a href="#top" class="white">返回顶部</a></td>
<td width="32%" align="center">Copyright © 版权所有 ICP备0000000号 </td>
<td width="14%"> </td>
<td width="17%"><a href="#"><img src="images/douyin.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weibo.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weixin.png" alt="" width="31" height="31"></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
6.photos.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>关于疫情</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
a {
font-family: "微软雅黑";
}
.top {
height: 72px;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #efefee;
}
.top .logo {
height: 51px;
width: 140px;
margin-right: auto;
margin-left: auto;
padding-top: 12px;
}
.bar-h42 {
height: 42px;
background-color: #f8f8f8;
font-family: "微软雅黑";
font-size: 14px;
color: #666;
position: relative;
z-index: 999;
left: auto;
right: auto;
}
ul,li{
margin:0px;
padding:0px;
list-style-type:none;}
/*横向向导航开始*/
#bar{
width:1150px;
margin:0px auto;
}
.contents {
font-family: "微软雅黑";
font-size: 14px;
line-height: 32px;
color: #333;
height: 720px;
width: 1150px;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #f2f2f2;
border-bottom-color: #f2f2f2;
border-left-color: #f2f2f2;
}
.footer {
height: 280px;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: #3e3e3e;
margin-top: 70px;
}
.footer .down {
height: 160px;
width: 1030px;
margin-right: auto;
margin-left: auto;
padding: 60px;
font-family: "微软雅黑";
font-size: 13px;
color: #cccccc;
}
.footer .down img:hover {
opacity : 0.800000011920928955078125;
}
#bar ul li{
width:135px;
height:42px;
text-align:center;
line-height:40px;
background-color: #f8f8f8;
float:left;}
.bar-h42 #bar .search {
float: left;
height: 26px;
width: 150px;
padding-top: 8px;
padding-left: 318px;
}
.bar-h42 #bar .search input {
height: 22px;
width: 150px;
font-family: "微软雅黑";
font-size: 13px;
color: #969696;
border-radius: 32px;
border: 1px solid #c8c8c8;
}
#bar ul li ul{
display:none;
margin-left:0px;}
#bar ul li:hover ul{display:block;}
#bar ul li:hover{
background-color: #e1e1e1;
}
.clear::after{
content:"";
display:block;
clear:both;}
/*横向导航END*/
a:link {
color: #686868;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #686868;
}
a:hover {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
}
a.white:link {
color: #FFF;
text-decoration: none;
}
a.white:visited {
text-decoration: none;
color: #FFF;
}
a.white:hover {
text-decoration: none;
color: #c8c8c8;
}
.dahei {
font-family: "微软雅黑";
font-size: 28px;
font-weight: bold;
color: #000;
}
a.white:active {
text-decoration: none;
}
.contents .commodity {
height: 280px;
width: 230px;
margin-left: 45px;
float: left;
margin-top: 50px;
border: 1px solid #f2f2f2;
}
.contents .commodity .com-img {
height: 230px;
width: 230px;
}
.contents .commodity .com-img img:hover {
opacity : 0.85;
}
.contents .commodity .com-text {
height: 50px;
width: 230px;
font-family: "微软雅黑";
font-size: 14px;
color: #333;
line-height:50px;
text-indent:25px
}
</style>
</head>
<body>
<div class="top">
<div class="logo"><a href="index.html"><img src="images/logo.png" width="140" height="51"></a></div>
</div>
<!-- 横向导航开始 -->
<div class="bar-h42">
<div id="bar" class="clear">
<ul>
<li><a href="index.html">回到首页</a></li>
<li><a href="photos.html">图片记忆</a></li>
<li><a href="#">更多相关 <img src="images/down.svg" alt="" width="10" height="10"></a>
<ul>
<li><a href="page1.html">英雄人物</a></li>
<li><a href="page2.html">全球现状</a></li>
<li><a href="video.html">国内疫情</a></li>
</ul>
</li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="message.html">给我留言</a></li>
</ul>
<div class="search">
<input type="text" value=" 搜索">
</div>
</div>
</div>
<!-- 横向导航END -->
<div class="contents">
<div class="commodity">
<div class="com-img"><a href="#"><img src="images/com-img01.jpg" width="230" height="230"></a></div>
<div class="com-text">图片记忆 >></div>
</div>
<div class="commodity">
<div class="com-img"><a href="#"><img src="images/com-img02.jpg" width="230" height="230"></a></div>
<div class="com-text">图片记忆 >></div>
</div>
<div class="commodity">
<div class="com-img"><a href="#"><img src="images/com-img03.jpg" width="230" height="230"></a></div>
<div class="com-text">图片记忆 >></div>
</div>
<div class="commodity">
<div class="com-img"><a href="#"><img src="images/com-img04.jpg" width="230" height="230"></a></div>
<div class="com-text">图片记忆 >></div>
</div>
<div class="commodity">
<div class="com-img"><a href="#"><img src="images/com-img05.jpg" width="230" height="230"></a></div>
<div class="com-text">图片记忆 >></div>
</div>
<div class="commodity">
<div class="com-img"><a href="#"><img src="images/com-img06.jpg" width="230" height="230"></a></div>
<div class="com-text">图片记忆 >></div>
</div>
<div class="commodity">
<div class="com-img"><a href="#"><img src="images/com-img07.jpg" width="230" height="230"></a></div>
<div class="com-text">图片记忆 >></div>
</div>
<div class="commodity">
<div class="com-img"><a href="#"><img src="images/com-img08.jpg" width="230" height="230"></a></div>
<div class="com-text">图片记忆 >></div>
</div>
</div>
<div class="footer">
<div class="down"><table width="100%" border="0">
<tr>
<td width="17%" height="161"><a href="index.html"><img src="images/logo1.png" alt="" width="140" height="51"></a></td>
<td width="20%"><a href="#top" class="white">返回顶部</a></td>
<td width="32%" align="center">Copyright © 版权所有 ICP备0000000号 </td>
<td width="14%"> </td>
<td width="17%"><a href="#"><img src="images/douyin.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weibo.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weixin.png" alt="" width="31" height="31"></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
7.video.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>关于疫情</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
a {
font-family: "微软雅黑";
}
.top {
height: 72px;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #efefee;
}
.top .logo {
height: 51px;
width: 140px;
margin-right: auto;
margin-left: auto;
padding-top: 12px;
}
.bar-h42 {
height: 42px;
background-color: #f8f8f8;
font-family: "微软雅黑";
font-size: 14px;
color: #666;
position: relative;
z-index: 999;
left: auto;
right: auto;
}
ul,li{
margin:0px;
padding:0px;
list-style-type:none;}
/*横向向导航开始*/
#bar{
width:1150px;
margin:0px auto;
}
.contents {
font-family: "微软雅黑";
font-size: 14px;
line-height: 32px;
color: #333;
height: 900px;
width: 1150px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
border: 1px solid #f2f2f2;
}
.footer {
height: 280px;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: #3e3e3e;
margin-top: 70px;
}
.footer .down {
height: 160px;
width: 1030px;
margin-right: auto;
margin-left: auto;
padding: 60px;
font-family: "微软雅黑";
font-size: 13px;
color: #cccccc;
}
.footer .down img:hover {
opacity : 0.800000011920928955078125;
}
#bar ul li{
width:135px;
height:42px;
text-align:center;
line-height:40px;
background-color: #f8f8f8;
float:left;}
.bar-h42 #bar .search {
float: left;
height: 26px;
width: 150px;
padding-top: 8px;
padding-left: 318px;
}
.bar-h42 #bar .search input {
height: 22px;
width: 150px;
font-family: "微软雅黑";
font-size: 13px;
color: #969696;
border-radius: 32px;
border: 1px solid #c8c8c8;
}
#bar ul li ul{
display:none;
margin-left:0px;}
#bar ul li:hover ul{display:block;}
#bar ul li:hover{
background-color: #e1e1e1;
}
.clear::after{
content:"";
display:block;
clear:both;}
/*横向导航END*/
a:link {
color: #686868;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #686868;
}
a:hover {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
}
a.white:link {
color: #FFF;
text-decoration: none;
}
a.white:visited {
text-decoration: none;
color: #FFF;
}
a.white:hover {
text-decoration: none;
color: #c8c8c8;
}
.dahei {
font-family: "微软雅黑";
font-size: 28px;
font-weight: bold;
color: #000;
}
a.white:active {
text-decoration: none;
}
.contents .B-title {
height: 43px;
width: 180px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
font-family: "微软雅黑";
font-size: 18px;
line-height: 43px;
font-weight: bold;
color: #000;
text-align: center;
border-radius: 52px;
background-color: #f4f4f4;
letter-spacing: 2px;
border: 1px solid #FFF;
}
.contents .B-title:hover {
border: 1px solid #e2e2e2;
}
.contents .division {
height: 50px;
width: 180px;
margin-right: auto;
margin-left: auto;
}
.contents #N-body {
height: 650px;
width: 850px;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
background-color: #f7f7f7;
border-radius: 10px;
border: 1px solid #FFF;
padding: 45px;
font-family: "微软雅黑";
font-size: 13px;
line-height: 40px;
color: #000;
}
.contents #N-body:hover {
border: 1px solid #e2e2e2;
}
</style>
</head>
<body>
<div class="top">
<div class="logo"><a href="index.html"><img src="images/logo.png" width="140" height="51"></a></div>
</div>
<!-- 横向导航开始 -->
<div class="bar-h42">
<div id="bar" class="clear">
<ul>
<li><a href="index.html">回到首页</a></li>
<li><a href="photos.html">图片记忆</a></li>
<li><a href="#">更多相关 <img src="images/down.svg" alt="" width="10" height="10"></a>
<ul>
<li><a href="page1.html">英雄人物</a></li>
<li><a href="page2.html">全球现状</a></li>
<li><a href="video.html">国内疫情</a></li>
</ul>
</li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="message.html">给我留言</a></li>
</ul>
<div class="search">
<input type="text" value=" 搜索">
</div>
</div>
</div>
<!-- 横向导航END -->
<div class="contents">
<div class="division"></div>
<div class="B-title">国内疫情</div>
<div id="N-body">
<table width="100%" border="0">
<tr>
<td align="left">【国家卫健委：本轮疫情由一起新的境外输入源头引起】10月24日，国家卫生健康委疾控局副局长吴良有在国务院联防联控机制新闻发布会上表示，根据现有流调和病毒测序结果，病例的病毒全基因组序列与国内此前的疫情的同源性低，提示本次疫情是由一起新的境外输入源头引起。总体上看，目前疫情处于快速发展阶段，非旅行团的病例数量开始增加，预计随着风险人群排查和筛查工作持续开展，未来几天发现病例数将继续增加，疫情波及范围可能进一步扩大。</td>
</tr>
<tr>
<td><video id="video" src="media/video.mp4" width="850" autoplay muted="muted"></video></td>
</tr>
</table>
</div>
</div>
<div class="footer">
<div class="down"><table width="100%" border="0">
<tr>
<td width="17%" height="161"><a href="index.html"><img src="images/logo1.png" alt="" width="140" height="51"></a></td>
<td width="20%"><a href="#top" class="white">返回顶部</a></td>
<td width="32%" align="center">Copyright © 版权所有 ICP备0000000号 </td>
<td width="14%"> </td>
<td width="17%"><a href="#"><img src="images/douyin.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weibo.png" alt="" width="31" height="31"></a> <a href="#"><img src="images/weixin.png" alt="" width="31" height="31"></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
（二）更多相关页面
在此页面中有三个子页面，分别描写了；英雄人物，全球现状，国内疫情三个版面。为了增强视觉效果，让图片和文字有更好的搭配，加快主页的浏览速度，整体就是非常的清晰、明了、简约、内容充实的网页。
通过此页面可以增加用户与我们之间的联系，有着进一步的交流，当用户与我们存在相互影响时也是降低沟通成本一种很好的办法，用户说出来，我们再去解决问题，大大的丰富了网页的内容，对双方都有收益。当用户需要帮助或是需要倾诉时就能想到我们，这也是对我们的一种激励，更是对此网页信任度的提升。
即使两年过去了，各个城市依然有着少量感染者，对2022年的期待也因为疫情而渐淡了许多。随着感染人数降低又增高心情也如过山车一般疫情防控人人有责，中国十分的注重人民百姓的生命安全，及时针对疫情做出的措施也颇见成效。人民安全的背后离不开国家的付出，从派医护人员到武汉支援，到短时间内建立完成火神山、雷神山医院。全国各地也纷纷捐赠物资到武汉(蔬菜、防护服等)，医护人员用强大的责任心为我们筑起了隔离病毒的屏障，守护者每一位人民的安全。所以了解病毒变得十分重要，只有了解才能消灭。于是便有了疫情防控网的开始，网站介绍病毒，并帮助用户简单快速的了解到如何防控病毒。我也会学习医护前辈的责任心，遇到问题处变不惊的态度，为国为民敢于付出不求回报的精神。为了降低病毒感染率我们每个人都应该学会防护，勤洗手，戴口罩，不过度疲劳，增强免疫力。在这个特殊的时期我能做的仅仅只是让更多的人了解这场突如其来的灾难，了解如何减少感染灾难的可能性。
现在疫情结束了，我要脱去口罩大口地呼吸新鲜空气、去看电影、逛街，更要去人多的地方感受热情。现在的我要充实好自己，学习更多的知识。在确定开发疫情防控网页时，我查阅了相关的周边，从最开始网页构思，网页分析，网页构思的实施，运行后查漏补缺页面美化，到最后的网页每一个阶段我都有认真对待。经过这次的网页设计经验我更加意识到了网页设计者们的不易。也因为我能力的欠缺导致网页部分功能未实现希望老师能够谅解。我会尽最大努力去提升自己的能力。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
