HTML静态网页成品作业(HTML+CSS)——抗击疫情网页(4个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有4个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!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>Document</title><link rel="stylesheet" href="css/style.css">
</head><body><!-- logo --><div class="logo"><img src="./images/logo.jpg" alt=""><h2>抗击新冠,人人有责</h2></div><!-- 导航 --><div class="nav w"><ul><a href="./common.html"><li>共同抗疫</li></a><a href="./entire.html"><li>全民防疫</li></a><a href="./significance.html"><li>抗疫的经验和意义</li></a><a href="./unity.html"><li>众志成城</li></a></ul></div><!-- 展示图片 --><div class="show w"><img src="./images/bgi.jpg" alt=""></div><!-- 前言 --><div class="details w"><h2>前 言</h2><div class="title"><p>有人说:“英雄就是普通人拥有一颗伟大的心。”</p><p>__年__月__日,小林的生命走到了最后一刻,由于央视的报道,小林的事迹才为广大人们所知。小林是__中心医院门口小店的老板,在疫情防控期间,他经常给医护人员采买食物,在物资紧缺的情况下,他自己戴着一次性口罩,好不容易买到的N95,他全部免费送给了一线医护人员,最后不幸感染逝世。他的逝世引起了无数人们的哀痛和深思。凡人小林只属于亿万人民群众之一,和平凡人一样拥有着生活的每一分快乐与悲伤,而正因为他拥有一颗伟大的心,才使他不平凡,使他成为人人敬仰的英雄。</p><p>这不仅让我反省:我是否真正理解平凡与不凡的意义?</p><p>人们常常对时代洪流中的英雄赞不绝口心生敬畏。无论是致力于推动祖国科技进步的科研人员,还是以笔为刃以求唤醒一代人的作家学者,亦或是直面危险守卫和平的军人,临危不惧挽救生命的医者,我们视他们为红日,照耀了一方天地,我们称他们为不凡,坚做了时代脊梁。</p><p>毕淑敏曾言:“要向一颗微不足道的小星学习,可以微弱,但要有光。”英雄的冲锋陷阵令人敬仰,而普通人心中那颗伟大的心也令人感动。一颗小星,从不会因为它的微弱而停止发光。</p><p>拥有悠久文明的中华民族更是不缺少这样平凡又不凡的人们,特别是在疫情肆虐的当前,种.种平凡人的不凡事迹令无数人深思感叹,令无数人的到心灵的慰藉。</p><p>你认为建一座医院需要多长时间?十天十夜。为了让更多患者得到有效的防空和治疗,一群善良勇敢的人穿上盔甲,不分昼夜与疫情赛跑。他们来自四面八方、讲着不同的乡音方言,却同样奋不顾身、挑战极限,托起“火神山”,传造出新的“中国速度”。因疫情而变得空荡荡的城市中,总有那样一类人在病毒肆虐中不停的穿梭,快递员不顾风险,依然默默坚持着,做好自己的工作,尽心尽力地维持着城市、社会的运转。因为无知,所以恐惧。在非常时期,人人自危抢口罩,找酒精,在真假难辨的互联网信息中惊慌失措。科普自媒体回形针则在这时推出的视频《关于新冠肺炎的一切》仿佛一颗定心丸,缓和了人们的焦虑情绪。虽然它不能与死神争分夺秒,但它让更多人对疫情有了全面认识,产生了极大的社会价值。以上种.种,无不展现着平凡中的不凡,而英雄也不是一种身份,而是一种无畏的精神。</p><p>在这场寂静无声却硝烟弥漫的战争里,总有人以最安静的方式离去,事实上那些勇敢的人也不过是千万民众里的平凡人,却以他们伟大的心写下了不凡的事迹,在我们每个人心中勾勒出了绚烂的一笔。</p><p>每个人都生来平凡,死亦如此。但平凡不等于平庸,我想,任何心中充满爱,充满责任,充满无畏精神的人,皆为不凡!</p></div></div>
</body></html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/754815.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图论题目集一(代码 注解)

目录 题目一&#xff1a; 题目二&#xff1a; 题目三&#xff1a; 题目四&#xff1a; 题目五&#xff1a; 题目六&#xff1a; 题目七&#xff1a; 题目一&#xff1a; #include<iostream> #include<queue> #include<cstring> using namespace st…

<商务世界>《第15课 投标文件一般包含的子文件》

1 响应文件封面 招标文件中的响应文件封面是投标人或参与者在提交响应文件时所使用的封面设计。这个封面不仅仅是文件的外包装&#xff0c;更是投标人形象和专业素质的直观展示&#xff0c;对于给招标方留下良好的第一印象至关重要。 首先&#xff0c;响应文件封面通常会包含…

硬盘哨兵Hard Disk Sentinel Pro V6.20.0.0 便携版

Hard Disk Sentinel 是一款功能强大的硬盘监控和分析软件&#xff0c;专为 Windows 用户设计。它可以实时监测硬盘驱动器&#xff08;HDD&#xff09;、固态硬盘&#xff08;SSD&#xff09;、混合硬盘&#xff08;SSHD&#xff09;、NVMe SSD、RAID 数组和外部 RAID 盒子的健康…

uniapp可视范围高度 - 用户屏幕可操作的屏幕高度 - 适用于APP、H5@公众号、纯H5@Chrome

可视范围高度 let heightPx uni.getWindowInfo().windowHeight uni.getWindowInfo().windowTop 官方手册 uni.getWindowInfo() | uni-app官网uni-app,uniCloud,serverless,uni.getWindowInfo()https://uniapp.dcloud.net.cn/api/system/getWindowInfo.html 实测数据 uni.ge…

十、MySQL主从架构配置

一、资源配置 主库&#xff1a;192.168.134.132 从库&#xff1a;192.168.134.133 从库&#xff1a;192.168.134.134 二、主从同步基本原理&#xff1a; master用户写入数据&#xff0c;会生成event记录到binary log中&#xff0c;slave会从master读取binlog来进行数据同步…

Java安全 反序列化(1) URLDNS链原理分析

Java安全 反序列化(1) URLDNS链原理分析 文章目录 Java安全 反序列化(1) URLDNS链原理分析前置知识应用分析payload1.新建HashMap类2.新建URL类3.获取URL 的 Class对象4.通过反射访问URL内部变量5.通过反射为URL中类赋值6.调用HashMap#put方法传入key和value7.再次通过反射为UR…

面向未来的前沿人工智能监管

策制定者应该为未来十年人工智能系统更加强大的世界做好准备。这些发展可能会在人工智能科学没有根本性突破的情况下发生&#xff0c;只需扩展当今的技术以在更多数据和计算上训练更大的模型即可。 用于训练前沿人工智能模型的计算量在未来十年可能会显着增加。到 2020 年代末…

03.生命周期和工程化开发入门

一、Vue生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09;什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a;就是一个Vue实例从创建 到 销毁 的整个过程。 生命…

【Linux】日常使用命令(三)

文章目录 **cal 命令****date 命令****bc 命令****Linux下玩小游戏**&#xff1a; cal 命令 功能描述: cal 命令用于显示日历。 常用选项: -3&#xff1a;显示前一个月、当前月和下一个月的日历。-y&#xff1a;显示整年的日历。 常用示例: # 示例 1: 显示当前月的日历 cal# …

python知识点总结(四)

这里写目录标题 1、Django 中的缓存是怎么用的&#xff1f;2、现有2元、3元、5元共三种面额的货币&#xff0c;如果需要找零99元&#xff0c;一共有多少种找零的方式?3、代码执行结果4、下面的代码执行结果为&#xff1a;5、说一下Python中变量的作用域。6、闭包7、python2与p…

发票OCR-国税可进行的发票查验种类-接口文档

发票查验内容包括发票种类名称、发票代码、发票号码、金额、销售方名称、购买方名称等信息。可以在国家税务总局全国增值税发票查验平台上进行查验&#xff0c;也可以进入发票所属省、直辖市税务局官方网站的“我要查询-发票查询”模块进行查验&#xff0c;企业也可以通过发…

二叉树遍历(牛客网)

描述 编一个程序&#xff0c;读入用户输入的一串先序遍历字符串&#xff0c;根据此字符串建立一个二叉树&#xff08;以指针方式存储&#xff09;。 例如如下的先序遍历字符串&#xff1a; ABC##DE#G##F### 其中“#”表示的是空格&#xff0c;空格字符代表空树。建立起此二叉树…

20240318uniapp怎么引用组件

在script中增加 import index from "/pages/index/index.vue" 把index直接整个作为一个组件引入 然后注册组件 在export default中增加 components: {index:index }, 注册了index组件&#xff0c;内容为import的index 然后就可以在template里使用 <index&…

机器人可反向驱动能力与力控架构

反向驱动性是电机传动系统的机械特性&#xff0c;它描述了运动是否可以轻松反转 。特别是&#xff0c;反向驱动能力取决于两个因素&#xff1a;传动运动效率和整体执行器机械阻抗。反向运动中传动装置的低运动效率意味着所施加的外力的大部分被运动反作用力抵消。然而&#xff…

Ubuntu 搭建gitlab服务器,及使用repo管理

一、GitLab安装与配置 GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 1、安装Ubuntu系统&#xff08;这个教程很多&#xff0c;就不展开了&#xff09;。 2、安装gitlab社区版本&#xff0c;有需…

GAMES101 学习 2

Lecture 7&#xff1a;Shading 1(lllumination,Shading and Graphics Pipeline) Visibility / occlusion 解决可见性和遮挡的问题 可见性&#xff0c;Z-buffering Z-Buffer 深度缓存 Idea&#xff1a; Store current min. z-value for each sample (pixel)Needs an additi…

python学习3:unittest测试框架初学习

python内置测试框架 unittest&#xff08;xUnit家族成员 参考JUnit&#xff09;doctest&#xff1a; 假设被测试目标: def add(a,b):c a breturn c创建一个"test_同名"的文件夹 基本用法 1 创建测试用例 1 定义TestCase的子类 2 定义test_开头的方法 3 在方法…

鸿蒙Harmony应用开发—ArkTS声明式开发(绘制组件:Line)

直线绘制组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Line(value?: {width?: string | number, height?: string | number}) 从API version 9开始&#xff0c;该接…

Twincat实现电机控制

不仅是控制系统的核心部分&#xff0c;而且能够将任何基于PC的系统转换为一个带有PLC、NC、CNC和机器人实时操作系统的实时控制系统。TwinCAT软件在工业自动化领域具有广泛的应用&#xff0c;特别是在机器人关节电机控制方面!!! 在机器人关节电机控制方面&#xff0c;TwinCAT通…

鸿蒙Harmony应用开发—ArkTS声明式开发(绘制组件:Shape)

绘制组件的父组件&#xff0c;父组件中会描述所有绘制组件均支持的通用属性。 1、绘制组件使用Shape作为父组件&#xff0c;实现类似SVG的效果。 2、绘制组件单独使用&#xff0c;用于在页面上绘制指定的图形。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有…