HTML做一个抗疫逆行者感动人物页面（纯html代码）

频道：游戏专题日期：2025-01-24 08:04:06 浏览：41

✍️作者简介：一位热爱将逻辑思维转化为代码的技术博主

作者主页：【主页-获取更多优质源码】

Web前端期末作业：【毕业设计精品实践案例（1000套）】

程序员有趣的告白方式：【HTML七夕情人节告白网页制作（110套）】

超酷的Echarts大屏可视化源码：【Echarts大屏展示大数据平台可视化（150套）】

HTML+CSS+JS 示例代码：

免费实用的WEB前端学习指南：

作者简介：曾任研发工程师、技术组长、教学总监； 2016年、2020年两次荣获CSDN年度十大博客之星。十年坚冰，难冷却热血；很多年过去了，事变了，人也变了。然而，对技术的探索和追求从未停止。坚持原创，热衷分享，不忘初心，继往开来！

文章目录

1. 网站标题

‍⚕️抗击疫情致敬逆行者主题、致敬逆行者网页设计作品、大学生抗击疫情专题网页设计作业模板等网站设计制作。

2. ✍️网站说明

️向抗击疫情的人们致敬的以人为主题的网页设计作品，采用DIV CSS布局制作。有多个页面：网站首页、感人人物、感人时刻、感人视频、感人相册、感人新闻页面。，使用CSS设置网页的背景颜色，并在鼠标经过导航区域时创建荧光效果。部分页面中插入了感人的MP4视频。作品的代码是学生水平简单制作的，DIV命名也合理。

一套高质量的网页设计应该包括（具体可以根据个人要求来确定）

页面分为四个部分：页眉、菜单导航栏（最好是下拉菜单）、中间内容部分和页脚。所有页面都相互链接，通向第三级页面爱游戏app入口官网首页，由 5-10 页组成。页面风格统一布局，显示正常，不杂乱，采用Div+Css技术。菜单美观、醒目，二级菜单可以正常弹出和跳转。需要JS特效，比如定时切换、手动切换图片轮播等。页面中有多媒体元素，如gif、视频、音乐，以及表单技术的使用。页面清新、美观、大方、与众不同。。不仅要能够呈现用户所需的内容，还要满足布局良好、界面美观、色彩搭配优雅、表现形式多样等要求。 3.网站介绍

网站布局：拟采用目前主流的浮动网页布局结构，兼容各大主流浏览器，显示效果稳定。

网站编程：拟采用最新的网页编程语言HTML5+CSS3+JS编程语言来完成网站的功能设计。并保证网站代码兼容目前市面上所有主流浏览器，这样打开后就能立即看到网站。

网站素材方面：计划是从各大平台收集好看的图片素材，精心挑选适合网页风格的图片，然后用PS制作出适合网页尺寸的图片。

网站文件：网站系统文件类型包括：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑：网页工作的代码简单，可以使用任何HTML编辑软件（如Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等HTML编辑软件）运行、修改和编辑。

在：

（1）html文件包含：index.html为首页，其他html为副页；

（2）css文件包含：css所有页面样式、文字滚动、图片放大等；

（3）js文件包括：实现动态轮播效果、表单提交、点击事件等的js（个别网页使用js代码）。

4. 网站演示

在这里插入图片描述

5. ⚙️网站代码HTML结构代码


DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>全球xxtitle>
head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="page">
<div class="banner"><img src="images/banner.jpg" width="1000" height="417">div>
<div class="daohang">
  <ul>
    <li><a href="index.html">网站首页a>li>
    <li><a href="page1.html">临床表现a>li>
    <li><a href="page2.html">诊疗方案a>li>
    <li><a href="page3.html">保障通知a>li>
    <li><a href="page4.html">最新动态a>li>
    <li><a href="page5.html">相关图片a>li>
  ul>
div>
<div class="zhong">
  <div class="zuo"><div class="zuo1"><img src="images/2.jpg" width="700" height="380">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2020年2月8日，xxxx发布会，会上xx布xxxxxxxdiv>div>
  <div class="you">
    <div class="you1">
      <p>最新动态p>
    div>
    <div class="you2">
      <p>2020今日中国xx最新消息：今日本土4例...p>
      <p>全国多省区出现手足口xxp>
      <p>xxx过35万丨全xxx...p>
      <p>美xx成xxx“震中”丨全xxx...p>
      <p>世界xx分布最新：xxx！p>
    div>
    <div style="margin-top:10px;" class="you1">
      <p>图片欣赏p>
    div>
    
    
    <div class="you2"><img src="images/1.jpg" width="280" height="320">div>
  div>
  div>
  <div class="clearit">div>
  <div class="foot"><p>全球xxp>div>
div>
body>
html>

CSS样式代码


@charset "utf-8";
/* CSS Document */ 
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 1; outline: none;}
body {	font-family: "微软雅黑";font-size: 14px;color:#000000; line-height:30px;text-align:left;     }
td,th {font-family: "宋体";font-size: 14px;color: #000000;}
.clearit{clear:both;}  
A:link {TEXT-DECORATION: none;} 
A:visited {TEXT-DECORATION: none;}
a{ color:#fff;}
ul,li{list-style-type:none; color:#000;}
p{ line-height:35px;}
.page{width:1000px; margin:0 auto;}
.daohang{height:40px; background-color:#31334c;}
.daohang ul li{float:left; font-size:16px; line-height:40px; text-align:center; width:166px; color:#FFFFFF;}
.zuo{float:left; width:700px;}
.you{float:right; width:280px;}
.you1{height:30px;background-color:#31334c;}
.you1 p{ margin-left:5px; color:#FFF; line-height:30px;}
.you2 p{border-bottom:1px solid #31334c;}
.zhong{margin-top:10px;}
.foot{height:40px; margin-top:20px;background-color:#31334c;}
.foot p{text-align:center; line-height:40px; color:#FFF;}
.yi{margin-top:20px;}
.tu{float:left; width:323px; margin-left:5px; margin-right:5px;}
.left{width:400px; float:left;}
.right{width:580px; float:right;}
.new p{border-bottom:1px solid #31334c;}

6.如何让学习不再盲目

21年经验程序员总结给编程新手的16条建议

入门期间不要盲目读太多书。在网上或者身边找一本有经验的程序员推荐的教材，先系统学习。多阅读帮助文档。帮助文档就像游戏中关于如何玩和通过关卡的说明。当你需要的时候就读它，不要太自信。菜鸟很容易被对象、属性、方法等词汇搞糊涂？那是因为你连最基本的知识都没有掌握。不要忽视任何看似不起眼的问题，时时总结、举一反三。在积累足够的知识和经验之前，你无法开发一个完整的项目。记住过时的技术比谈论最新的技术更好。边生活边学习，仅凭一招半招是无法在世上取得成功的。仔细阅读你能理解的书籍；看不懂的书，都读一遍。这本书的意义，读一百遍之后就会明白。不要指望读一遍就能掌握它。请自行练习教程中的示例，即使案例中包含完整的源代码。扩展教程中看到的有意义的示例；并将它们实际应用到自己的工作中。不要错过教程中的任何练习 - 全部完成并做笔记。水平是通过不断的练习而提高和发展的。你和丹尼尔唯一的区别就是经验的积累。每当你学习到一个难点时，尝试与朋友或在网上分享你的经验，让其他人能够理解它，这表明你已经真正掌握了它。养成保存源文件的习惯。这些都是你的知识积累。当你遇到问题时，不要只是问。学会自己寻找答案。比如Google、百度、w3cschool上都有很多编程相关的资料。只需输入关键字即可找到答案。 7.更多有用信息

1.如果我的博客对您有帮助，如果您喜欢我的博客内容，请一键“点赞”“✍️评论”“收藏”！

2.【跟我来|获取更多源代码 |优质文章】让你学习各种前端插件，3D炫酷效果，图片显示，文字效果，以及整站模板爱游体育app下载官网，大学毕业HTML模板爱游戏app官方入口最新版本，期末作业模板等！ “这里有很多前端开发人员，我们一起讨论前端Node知识，互相学习”！

欢迎大家就以上内容相关的技术问题共同交流学习。

[上一篇]07073游戏网

[下一篇]《Tentacle locker:Guide 2k21(Tentacle Locker Mobile Clue)》游戏截图