前段导航栏设计（div+css）
本页面的实现基于HTML,CSS,其中页面布局涉及到<div></div>块标签的使用，页面整体及导航栏的样式涉及到CSS使用。该页面包括横向导航栏及竖向导航栏，此外导航栏设计还涉及到CSS伪类，实现鼠标移到链接，访问链接后，链接文字颜色发生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV+CSS个性化导航栏设计</title>
<style>
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 200px;
position: relative;
}
#header img {
width: 100%;
height: 100%;
z-index: -1;
}
#nav {
width: 100%;
height: 40px;
background-color: black;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
text-decoration: none;
text-align: left;
padding: 10px 15px;
color: white;
}
#nav li a:hover {
background-color: lightgray;
color: black;
}
#left {
clear: both;
width: 20%;
height: 400px;
background-color: lightsalmon;
float: left;
position: relative;
border-right: 1px solid lightgrey;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
overflow: auto;
width: 100%;
height: 200px;
}
#left ul li {
border: 1px solid lightgrey;
}
#left ul a.active {
background-color: mediumspringgreen;
}
#left ul li a {
display: block;
color: black;
padding: 10px 10px;
text-decoration: none;
background-color: lightgrey;
}
#left ul li a:not(.active):hover {
background-color: peru;
color: white;
}
#content {
width: 79.9%;
height: 400px;
float: right;
overflow: auto;
background-color: blanchedalmond;
}
#content h2 {
text-align: center;
border-right: 1px solid lightgray;
background-color: lightblue;
padding: 5px 0;
}
#footer {
position: relative;
bottom: 0;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 100%;
padding: 10px 0;
clear: both;
}
#footer h2 {
margin: 0;
text-align: center;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #D3D8C4;
}
#footer h2 a:visited,
#footer h2 a:link {
color: #D3D8C4;
text-decoration: none;
border-bottom: 1px dotted #D3D8C4;
}
#footer h2 a:hover {
color: #F7F7F6;
text-decoration: none;
border-bottom: none;
background-color: #A5003B;
}
</style>
</head>
<body>
<div>
<div id="header">
<img src="头部背景图.jpeg" alt="logo">
</div>
<div id="nav">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<div id="left">
<ul>
<li class="active"><a class="active" href="#">疫情防范成果</a></li>
<li><a href="#">疫情防范</a></li>
<li><a href="#">疫苗接种普及</a></li>
<li><a href="#">疫情知识普及</a></li>
</ul>
</div>
<div id="content">
<h2>中国疫情防范措施</h2>
<p>新冠肺炎疫情是新中国成立以来发生的传播速度最快、感染范围最广、防控难度最大的一次重大突发公共卫生事件，对中国是一次危机，也是一次大考。中国共
产党和中国政府高度重视、迅速行动，习近平总书记亲自指挥、亲自部署，统揽全局、果断决策，为中国人民抗击疫情坚定了信心、凝聚了力量、指明了方向。
在中国共产
党领导下，全国上下贯彻“坚定信心、同舟共济、科学防治、精准施策”总要求，打响抗击疫情的人民战争、总体战、阻击战。经过艰苦卓绝的努力，中国付出巨大代价和牺牲，有力扭转了疫情局势，用一个多月的时间初步遏制了疫情蔓延势头。
用两个月左右的时间将本土每日新增病例控制在个位数以内，用3个月左右的时间取得了武汉保卫战、湖北保卫战的决定性成果，疫情防控阻击战取得重大战略成果，维护了人民生命安全和身体健康，为维护地区和世界公共卫生安全作出了重要贡献。
</p>
<h2>新冠疫情防范方法</h2>
<p class="text">
1、勤洗手和保持良好的呼吸道卫生习惯
使用肥皂或洗手液并用流动水洗手，用一次性纸巾或干净毛巾擦手。双手接触呼吸道分泌物后(如打喷嚏后)应立即洗手。
保持良好的呼吸道卫生习惯。咳嗽或打喷嚏时，用纸巾、毛巾等遮住口鼻，咳嗽或打喷嚏后洗手，避免用手触摸眼睛、鼻或口。
2、增强体质、免疫力，保持环境清洁和通风
增强体质和免疫力，均衡饮食、适量运动、作息规律，避免过度疲劳。
每天开窗通风次数不少于3次，每次20~30分钟。户外空气质量较差时，通风换气频次和时间应适当减少。
3、尽量减少到人群密集场所活动并且关注症状
尽量减少到人群密集场所活动，避免接触呼吸道感染患者。
出现呼吸道感染症状如咳嗽、流涕、发热等，应居家隔离休息，持续发热不退或症状加重时及早就诊。
4、洗手在预防呼吸道传播疾病中的作用
正确洗手是预防腹泻和呼吸道感染的较有效措施之一。中国疾病预防控制中心、世界卫生组织等权威机构均推荐用肥皂和清水(流水)充分洗手。
5、正确洗手需掌握六步洗手法
①双手手心相互搓洗(双手合十搓五下);
②双手交叉搓洗手指缝(手心对手背，双手交叉相叠，左右手交换各搓洗五下);
③手心对手心搓洗手指缝(手心相对十指交错，搓洗五下);
④指尖搓洗手心，左右手相同(指尖放于手心相互相互搓各洗搓五下);
⑤一只手握住另一只手的拇指搓洗，左右手相同各搓五下;
⑥弯曲手指使关节在另一手掌心旋转揉搓，交换进行各搓五下。
6、哪些时候需要洗手
①传递文件前后;
②在咳嗽或打喷嚏后;
③在制备食品之前、期间和之后;
④吃饭前;
⑤上厕所后;
⑥手脏时;
⑦在接触他人后;
⑧接触过动物之后;
⑨外出回来后。
7、旅途在外没有清水，不方便洗手怎么办?
可以使用含酒精消毒产品清洁双手。冠状病毒不耐酸不耐碱，并且对有机溶剂和消毒剂敏感。75%酒精可灭活病毒，所以达到一定浓度的含酒精消毒产品可以作为肥皂和流水洗手的替代品。
8、口罩该怎么选?
选择一：正常外出时选择一次性医用口罩即可，连续佩戴4小时更换，污染或潮湿后立即更换;
选择二：去医院看病或人群密集处可选用N95医用防护口罩，连续佩戴4小时更换，污染或是潮湿后立即更换。
棉布口罩、海绵口罩均不推荐。
9、正确使用口罩
医用口罩的使用方法。
①口罩颜色深的是正面，正面应该朝外，而且医用口罩上还有鼻夹金属条。
②正对脸部的应该是医用口罩的反面，也就是颜色比较浅的一面，除此之外，要注意带有金属条的部分应该在口罩的上方，不要戴反了。
③分清楚口罩的正面、反面、上端、下端后，将手洗干净，将两端的绳子挂在耳朵上。
④较后用手压紧鼻梁两侧的金属条，使口罩上端紧贴鼻梁，然后向下拉伸口罩，使口罩不留有褶皱，覆盖住鼻子和嘴巴。
10、特殊人群如何佩戴口罩
①孕妇佩戴防护口罩，应注意结合自身条件，选择舒适性比较好的产品。
②老年人及有心肺疾病的慢性病患者佩戴后会造成不适感，甚至会加重原有病情，应寻求医生的专业指导。
③儿童处在生长发育阶段，其脸型小，选择儿童防护口罩。
</p>
</div>
<div id="footer">
<h2>copyright © 2010 Neusoft –
<a href="http://www.neusoft.com" target="_blank">
Duoh!® n.v.
</a>
From
<a href="http:// www.neusoft.com " target="_blank">
www.neusoft.com
</a>
</h2>
</div>
</div>
</body>
</html>
