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

news2024/11/29 10:47:01

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.coloradmin.cn/o/1529858.html

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

相关文章

Node.js常用命令:了解Node.js的核心命令和用法

学习目标&#xff1a; 理解Node.js和npm的概念及其在开发中的作用&#xff1b;掌握Node.js的核心命令&#xff0c;包括node、npm、npx等&#xff1b;学会使用node命令来执行JavaScript文件和模块&#xff1b;熟悉npm命令&#xff0c;包括安装、更新、卸载依赖包等操作&#xf…

内存泄漏检测、单向链表的操作

我要成为嵌入式高手之3月19日数据结构第二天&#xff01;&#xff01; ———————————————————————————— valgrind内存测试工具 让虚拟机上网、在虚拟机上下载软件&#xff0c;参考笔记&#xff1a; 我要成为嵌入式高手之2月3日Linux高编第一天&am…

React状态管理库快速上手-Redux(一)

基本使用 安装 pnpm install reduxjs/toolkit react-redux创建一个仓库 定义state createSlice相当于创建了一个模块仓库&#xff0c;initialState存放状态&#xff0c;reducers存放改变状态的方法。 import { createSlice } from reduxjs/toolkitexport const counterSli…

python与excel第一节

python与excel第一节 由于excel在日常办公中大量使用&#xff0c;我们工作中常常会面对高频次或者大量数据的情况。使用python语言可以更加便捷的处理excel。 python与vba的比较 python语法更加简洁&#xff0c;相较于vba冗长复杂的语法&#xff0c;python更加容易学习。 p…

长安链智能合约标准协议第二草案——BNS与DID协议邀请社区用户评审

长安链智能合约标准协议 在智能合约编写过程中&#xff0c;不同的产品及开发人员对业务理解和编程习惯不同&#xff0c;即使同一业务所编写的合约在具体实现上也可能有很大差异&#xff0c;在运维或业务对接中面临较大的学习和理解成本&#xff0c;现有公链合约协议规范又不能完…

【C++】Qt:WebSocket客户端示例

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍WebSocket客户端示例。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&…

Python分析无人驾驶汽车在桂林市文旅行业推广的问卷

【项目背景】 通过市场调研、文本分析、访谈和问卷调查等方法&#xff0c;探讨&#xff1a; 网民对无人驾驶汽车出行服务的态度。无人驾驶安全员的行业背景。不同人群在旅游时的交通选择偏好。游客及当地居民对桂林市文旅路线的交通满意度。乘客对无人驾驶汽车的满意度。桂林…

X1 grok-1 开源大语言模型下载

Grok 前言 我们正在发布我们的大型语言模型 Grok-1 的基本模型权重和网络架构。Grok-1 是一个 3140 亿参数的专家混合模型&#xff0c;由 xAI 从头开始训练。 这是 2023 年 10 月结束的 Grok-1 预训练阶段的原始基础模型检查点。这意味着该模型不会针对任何特定应用&#xff…

C++特性三:多态的基本语法及原理剖析

一、多态的基本语法 多态分为两类 静态多态: 函数重载 和 运算符重载属于静态多态&#xff0c;复用函数名 动态多态: 派生类和虚函数实现运行时多态 静态多态和动态多态区别&#xff1a; 静态多态的函数地址早绑定 - 编译阶段确定函数地址 动态多态的函数地址晚绑定 - 运…

GitHub Copilot+ESP开发实战-串口

上篇文章讲了GitHub Copilot在应用中可能遇到的问题&#xff0c;接下来小启就简单介绍下GitHub Copilot在ESP32开发中C语言实现串口功能&#xff0c;感兴趣的可以看看。 一、向Copilot提问&#xff1a; 1. ESP32用C语言实现串口初始化&#xff1b; 2.配置uart为1&#xff0c…

wayland(xdg_wm_base) + egl + opengles 使用 Assimp 加载带光照信息的材质文件Mtl 实现光照贴图的最简实例(十七)

文章目录 前言一、3d 立方体 model 属性相关文件1. cube1.obj2. cube1.Mtl3. 纹理图片 cordeBouee4.jpg二、实现光照贴图的效果1. 依赖库和头文件1.1 assimp1.2 stb_image.h2. egl_wayland_obj_cube1.cpp3. Matrix.h 和 Matrix.cpp4. xdg-shell-client-protocol.h 和 xdg-shell…

9.登入页面

登入页面 在pages中新建页面login 修改代码 <template><view></view> </template><script setup></script><style lang"scss"></style>添加头像组件 官网 https://vkuviewdoc.fsq.pub/components/avatar.html …

原生html vue3使用element plus 的树tree上移下移案例源码

上效果 html源码 <!DOCTYPE html> <html lang"en"> <!-- * Name: mallSalesReports.html * Description: * Author Lani * date 2024-02-28 18:32:36 --> <head><meta charset"UTF-8"><meta name"viewport" …

mapstruct学习笔记-pojo之间的转换

1、前言 mapstruct中常用注解如Mapping,AfterMapping,BeanMapping等的使用,通过案例说明各式各样的业务pojo对象之间如何借助mapstruct完成相互之间的转换,减少代码量的同时也能突出业务逻辑流程,让你的代码里写起来更有规范可言。 2、简介 Reference Guide – MapStruct 3…

【GPT概念01】生成式预训练转换器

一、说明 本文对GPT有所描述&#xff0c;主要解释了GPT的重要环节&#xff1a;only解码器。以及这个过程中&#xff0c;原始数据的维度演进、变化过程。对于想知道GPT内结构的朋友能有一定帮助。 二、唯一解码器模型入门 — 因果语言建模 Decoder only Model&#xff1a;唯一解…

Go web 基础相关知识

Go web Web工作方式 浏览器本身是一个客户端&#xff0c;当你输入URL的时候&#xff0c;首先浏览器会去请求DNS服务器&#xff0c;通过DNS获取相应的域名对应的IP&#xff0c;然后通过IP地址找到IP对应的服务器后&#xff0c;要求建立TCP连接&#xff0c;等浏览器发送完HTTP …

QT配置libtorch(一步到位!!!防止踩坑)

QT配置libtorch Qt下载QT配置MSVCQT配置Libtorch Qt下载 Qt点击下载 Qt的安装选择MSVC2017 64-bit(一定要安装&#xff0c;这关乎后面的配置&#xff01;&#xff01;&#xff01;)&#xff0c;其他的根据自己的选择进行安装 QT配置MSVC Visual Studio点击安装 这里需要安装VS以…

PwnLab靶场PHP伪协议OSCP推荐代码审计命令劫持命令注入

下载链接&#xff1a;PwnLab: init ~ VulnHub 安装&#xff1a; 打开vxbox直接选择导入虚拟电脑即可 正文&#xff1a; 先用nmap扫描靶机ip nmap -sn 192.168.1.1/24 获取到靶机ip后&#xff0c;对靶机的端口进行扫描&#xff0c;并把结果输出到PwnLab文件夹下&#xff0c;命名…

Spark相关

1.Hadoop主要有哪些缺点&#xff1f;相比之下&#xff0c;Spark具有哪些优点&#xff1f; Hadoop主要有哪些缺点&#xff1a;Hadoop虽然已成为大数据技术的事实标准&#xff0c;但其本身还存在诸多缺陷&#xff0c;最主要的缺陷是 MapReduce计算模型延迟过高&#xff0c;无法胜…

Swift中 any some的作用

前言 在学习Swift ui看到一个函数返回了some view。view我可以理解那some是什么&#xff1f; //ContentView.swift struct ContentView_Previews: PreviewProvider{static var previews: some View{ContentView()} }如果你仔细看一些官方文档甚至还有any关键字&#xff0c;也…