功能特点
- 响应式布局：适配桌面、平板和手机等各种屏幕尺寸。
- 清晰的导航：顶部固定导航栏，方便用户快速跳转到各个板块。
- 疫情数据展示：模拟展示关键疫情数据（数据为静态，便于演示）。
- 防护知识卡片：图文并茂地展示个人防护要点。
- 疫苗信息：清晰列出不同疫苗的适用人群和注意事项。
- 辟谣中心：使用标签样式展示常见谣言和科学真相。
- 平滑滚动：点击导航链接时，页面会平滑滚动到对应位置，体验更佳。
完整HTML源代码
您可以直接将以下所有代码复制到一个文本文件中,并将其命名为 防疫宣传.html，然后用浏览器打开即可看到效果。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">科学防疫，守护健康 - 官方防疫信息平台</title>
<!-- 引入 Bootstrap CSS 用于快速构建响应式布局 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 自定义CSS样式 */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--light-bg: #f8f9fa;
--dark-text: #343a40;
}
body {
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
color: var(--dark-text);
}
/* 导航栏样式 */
.navbar {
box-shadow: 0 2px 4px rgba(0,0,0,.1);
background-color: #fff !important;
}
.navbar-brand {
font-weight: bold;
color: var(--primary-color) !important;
}
.navbar-nav .nav-link {
color: var(--dark-text) !important;
font-weight: 500;
margin: 0 10px;
transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover {
color: var(--primary-color) !important;
}
/* 区块通用样式 */
.section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 50px;
position: relative;
}
.section-title h2 {
font-size: 2.5rem;
font-weight: bold;
color: var(--dark-text);
position: relative;
display: inline-block;
}
.section-title h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background-color: var(--primary-color);
border-radius: 2px;
}
/* 首页英雄区样式 */
.hero-section {
background: linear-gradient(rgba(0, 123, 255, 0.8), rgba(0, 123, 255, 0.6)), url('https://images.unsplash.com/photo-1584276433295-aab7a3d55b33?q=80&w=1974&auto=format&fit=crop') no-repeat center center/cover;
color: white;
padding: 120px 0;
text-align: center;
}
.hero-section h1 {
font-size: 3.5rem;
font-weight: bold;
margin-bottom: 20px;
}
.hero-section p {
font-size: 1.2rem;
margin-bottom: 30px;
}
/* 数据卡片样式 */
.stat-card {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
padding: 30px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.stat-card i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 15px;
}
.stat-card h3 {
font-size: 2.5rem;
font-weight: bold;
color: var(--dark-text);
margin-bottom: 10px;
}
.stat-card p {
color: var(--secondary-color);
font-size: 1.1rem;
}
/* 防护知识卡片样式 */
.protection-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.protection-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.protection-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.protection-card-body {
padding: 25px;
}
.protection-card-body h5 {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 15px;
color: var(--dark-text);
}
/* 疫苗信息表格样式 */
.vaccine-table {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.vaccine-table th {
background-color: var(--primary-color);
color: white;
text-align: center;
font-weight: 600;
}
.vaccine-table td {
text-align: center;
vertical-align: middle;
}
/* 辟谣中心样式 */
.rumor-item {
background: white;
border-radius: 10px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
border-left: 5px solid #dc3545; /* 谣言用红色边框 */
}
.truth-item {
background: white;
border-radius: 10px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
border-left: 5px solid #28a745; /* 真相用绿色边框 */
}
.rumor-label, .truth-label {
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
margin-bottom: 10px;
}
.rumor-label {
background-color: #f8d7da;
color: #721c24;
}
.truth-label {
background-color: #d4edda;
color: #155724;
}
/* 页脚样式 */
footer {
background-color: var(--dark-text);
color: white;
padding: 40px 0 20px;
text-align: center;
}
footer a {
color: #adb5bd;
text-decoration: none;
margin: 0 10px;
}
footer a:hover {
color: white;
}
/* 响应式调整 */
@media (max-width: 768px) {
.hero-section h1 {
font-size: 2.5rem;
}
.section-title h2 {
font-size: 2rem;
}
.stat-card h3 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><i class="fas fa-shield-virus"></i> 防疫宣传</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#home">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#data">疫情动态</a></li>
<li class="nav-item"><a class="nav-link" href="#protection">防护知识</a></li>
<li class="nav-item"><a class="nav-link" href="#vaccine">疫苗信息</a></li>
<li class="nav-item"><a class="nav-link" href="#rumors">辟谣中心</a></li>
</ul>
</div>
</div>
</nav>
<!-- 首页英雄区 -->
<section id="home" class="hero-section">
<div class="container">
<h1>科学防疫，守护健康</h1>
<p>获取最新、最权威的防疫信息，共同筑牢健康防线</p>
<a href="#data" class="btn btn-light btn-lg">了解更多 <i class="fas fa-arrow-down"></i></a>
</div>
</section>
<!-- 疫情动态 -->
<section id="data" class="section">
<div class="container">
<div class="section-title">
<h2>疫情动态</h2>
</div>
<div class="row g-4">
<div class="col-md-3 col-sm-6">
<div class="stat-card">
<i class="fas fa-user-check"></i>
<h3>1,234,567</h3>
<p>累计确诊</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="stat-card">
<i class="fas fa-user-shield"></i>
<h3>1,200,000</h3>
<p>治愈出院</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="stat-card">
<i class="fas fa-heartbeat"></i>
<h3>99.5%</h3>
<p>治愈率</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="stat-card">
<i class="fas fa-syringe"></i>
<h3>5,000,000</h3>
<p>疫苗接种</p>
</div>
</div>
</div>
</div>
</section>
<!-- 防护知识 -->
<section id="protection" class="section" style="background-color: var(--light-bg);">
<div class="container">
<div class="section-title">
<h2>防护知识</h2>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="protection-card">
<img src="https://images.unsplash.com/photo-1584276433295-aab7a3d55b33?q=80&w=960&auto=format&fit=crop" alt="佩戴口罩">
<div class="protection-card-body">
<h5><i class="fas fa-head-side-mask"></i> 科学佩戴口罩</h5>
<p>在人员密集的室内场所、乘坐公共交通工具或与他人近距离接触时，请务必规范佩戴口罩。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="protection-card">
<img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=960&auto=format&fit=crop" alt="勤洗手">
<div class="protection-card-body">
<h5><i class="fas fa-hands-wash"></i> 保持手部卫生</h5>
<p>用肥皂和流动水洗手，或使用含酒精的免洗洗手液，触摸公共物品后，请及时清洁双手。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="protection-card">
<img src="https://images.unsplash.com/photo-1581091229912-2a1d712dc660?q=80&w=960&auto=format&fit=crop" alt="保持社交距离">
<div class="protection-card-body">
<h5><i class="fas fa-users"></i> 保持社交距离</h5>
<p>尽量减少前往人群密集的场所，与他人交谈时保持至少1米以上的安全距离。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 疫苗信息 -->
<section id="vaccine" class="section">
<div class="container">
<div class="section-title">
<h2>疫苗信息</h2>
</div>
<div class="vaccine-table">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>疫苗类型</th>
<th>适用人群</th>
<th>接种剂次</th>
<th>注意事项</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>灭活疫苗</strong></td>
<td>18岁以上人群</td>
<td>2剂</td>
<td>接种后留观30分钟，避免剧烈运动</td>
</tr>
<tr>
<td><strong>重组蛋白疫苗</strong></td>
<td>18岁以上人群</td>
<td>3剂</td>
<td>对疫苗成分过敏者禁用</td>
</tr>
<tr>
<td><strong>腺病毒载体疫苗</strong></td>
<td>18-59岁人群</td>
<td>1剂</td>
<td>血小板减少症患者慎用</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 辟谣中心 -->
<section id="rumors" class="section" style="background-color: var(--light-bg);">
<div class="container">
<div class="section-title">
<h2>辟谣中心</h2>
</div>
<div class="row">
<div class="col-lg-6">
<h4 class="mb-4"><i class="fas fa-exclamation-triangle text-danger"></i> 常见谣言</h4>
<div class="rumor-item">
<span class="rumor-label">谣言</span>
<h5>“喝高度酒能杀死病毒，预防感染”</h5>
<p>酒精（乙醇）可有效灭活病毒，但饮用白酒、啤酒等饮品无法杀灭呼吸道中的病毒，反而可能损害身体。</p>
</div>
<div class="rumor-item">
<span class="rumor-label">谣言</span>
<h5>“吃抗生素可以预防新冠病毒”</h5>
<p>抗生素用于治疗细菌感染，对新冠病毒无效，滥用抗生素会导致耐药性，危害健康。</p>
</div>
</div>
<div class="col-lg-6">
<h4 class="mb-4"><i class="fas fa-check-circle text-success"></i> 科学真相</h4>
<div class="truth-item">
<span class="truth-label">真相</span>
<h5>“接种疫苗是预防重症和死亡最有效的手段”</h5>
<p>全球大量真实世界数据表明，完成疫苗接种后，可显著降低感染后发生重症和死亡的风险。</p>
</div>
<div class="truth-item">
<span class="truth-label">真相</span>
<h5>““阳”过之后，身体会产生抗体，无需再戴口罩”</h5>
<p>虽然感染后会产生一定的免疫力，但仍有再次感染的可能，为了保护自己和他人，在公共场所仍建议佩戴口罩。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="container">
<p>© 2025 科学防疫宣传平台. 保留所有权利.</p>
<p>
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
</p>
<p class="mt-3 text-muted">
<small>本网站信息仅供参考，具体防疫措施请遵循当地卫生健康部门官方指引。</small>
</p>
</div>
</footer>
<!-- 引入 Bootstrap JS 和 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 平滑滚动脚本 -->
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
// 调整滚动位置，以避免导航栏遮挡
const offsetTop = target.offsetTop - 70; // 70px是导航栏的大致高度
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>
如何使用
- 创建文件：在你的电脑上新建一个文本文档。
- 复制代码：将上面提供的完整HTML源代码全部复制并粘贴到这个新建的文本文档中。
- 保存文件：点击“文件” -> “另存为”，在“保存类型”中选择“所有文件”，然后将文件名命名为
防疫宣传.html（确保后缀名是.html）。 - 打开网页：找到你保存的
防疫宣传.html文件，用任何现代浏览器（如 Chrome, Firefox, Edge, Safari）双击打开即可。
技术说明
- HTML (骨架)：负责定义页面的结构和内容，如导航栏、标题、段落、图片、表格等。
- CSS (样式)：负责美化页面，本代码中的
<style>标签内定义了所有样式，包括颜色、字体、布局、悬停效果等，使页面看起来美观、专业。 - Bootstrap (框架)：通过引入
bootstrap.min.css，我们使用了非常流行的前端框架，它极大地简化了响应式布局的实现，使得页面在不同设备上都能良好显示。 - Font Awesome (图标)：通过引入
font-awesome.min.css，我们可以在页面中使用各种精美的图标，增强了视觉效果。 - JavaScript (交互)：通过引入
bootstrap.bundle.min.js和编写内联的<script>代码，我们实现了导航栏的折叠功能（在手机端）和点击导航链接时的平滑滚动效果，提升了用户体验。
这个源代码是一个功能完整、设计现代的起点，您可以根据实际需求（例如接入真实的疫情API、添加更多内容等）进行进一步的修改和扩展。
（图片来源网络，侵删）
