制作一个简单HTML抗疫逆行者网页作业（HTML+CSS）

news2024/11/27 4:30:16

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、💠网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货

一、👨‍🎓网站题目

👨‍⚕️ 抗击疫情致敬逆行者感人类题材、致敬逆行者网页设计作品、大学生抗疫感动专题网页设计作业模板、等网站的设计与制作。

二、✍️网站描述

🏷️抗击疫情致敬逆行者感人类题材网页设计作品采用DIV CSS布局制作，共多个页面：网站首页、感动人物、动人瞬间、感人视频、感动图集、感动新闻页面。，使用CSS设置了网页背景颜色，制作了导航区域鼠标经过荧光效果。个别页面插入了感人MP4视频。作品代码采用学生简单水平制作，DIV命名合理。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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代码）。

四、💠网站演示

在这里插入图片描述

五、⚙️ 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>疫情危害与防护</title>
</head>
<body>
<div class="wrapin">
  <!--头部-->
  <header>
    <ul class="nav clearfix">
      <li><a href="index.html">网站首页</a></li>
      <li><a href="juqing.html">病毒介绍</a></li>
      <li><a href="juese.html">传播途径</a></li>
      <li><a href="jingchai.html">时事疫情</a></li>
      <li><a href="tupian.html">防疫英姿</a></li>
      <li><a href="zhuce.html">用户注册</a></li>
      <li><a href="denglu.html">用户登录</a></li>
    </ul>
  </header>
 <div id="banner" class="banner wrapin">
    <ul id="b_pic">
      <li style="display: block;"><img src="images/banner_1.jpg"></li>
      <li><img src="images/banner_2.jpg"></li>
      <li><img src="images/banner_3.jpg"></li>
    </ul>
    <ul id="b_an">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script src="./js/lb.js"></script>
  <!--内容-->
  <div class="con ">
    <div class="top clearfix">
      <div class="txt">
        <div class="title">
          <h2>新x状病毒</h2>
        </div>
        <P>2019新xS）和严重急性呼吸综x型冠状病毒是以前从未在人体中x</P>
        <br>
        xx一个大型病毒家族，已知可引起xxx性呼吸综合征xx疾病。新x发现的冠状病毒新毒株。
        人x常见体征有呼吸道症状、发x致肺炎、严重急性呼吸综合征、肾衰竭，甚至死亡xx状xx所致疾病没有特异治疗方法。但许x因此需根据患者临床情况进行治疗x对感染者x理可能非常有效。做好自我保护包括：保持基本的手部和呼吸道卫x习惯等  。 </div>
    </div>
    <div class="tupian">
      <div class="title">
        <h2>防护病毒措施</h2>
      </div>
      <ul class="clearfix">
        <li><img src="images/5.jpg"/></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/banner_3.jpg"/></li>
      </ul>
    </div>
    <div class="pinglun tupian">
      <div class="title">
        <h2>核酸检测因时而异</h2>
      </div>
      <ul class="clearfix">
        <li><img src="images/13.jpg"/></li>
        <li><img src="images/16.jpg"/></li>
        <li><img src="images/15.jpg"/></li>
        <li><img src="images/12.jpg"/></li>
      </ul>
      <div class="text">美xx人员发现，新冠病毒核酸检测灵敏度随xxx们在中午进行检测获得准确阳性测试结果的可能性比晚xx结果2021年10月26日发表在xxx》上。研究人员认为，这些数据支持一种假设，即新冠病毒根据自然昼夜节律在人x细菌感染的研究也暗示了这一点。受感染的细胞将传染性病毒颗粒释放到血液和黏液中，即“病毒x在中午似乎更活跃，因为人x系统。研究结果表明，晚上8点以后病毒载量较低。如果人们选择在这时候进行检测，出现假阴性结果的可能性可能会更高。
        研究人员认为，可以利用时间x略甚至疫x高结果的准确性，应该在一天中的最佳时间进行检测，同时还能避免假阴性测试结果的出现，尤其是在无症状感染人群中。 </div>
    </div>
  </div>
  <!--底部-->
  <footer>
    <p>疫情危害与防护</p>
  </footer>
</div>
</body>
</html>

💒CSS样式代码

/*通用类*/
* {
	margin: 0;
	padding: 0;
}
body {
	margin: 0 auto;
	font-size: 14px;
	color: #333;
	position: relative;
}
img {
	border: none;
}
a {
	cursor: pointer;
	color: #333;
	text-decoration: none;
	outline: none;
}
ul {
	list-style-type: none;
}
em {
	font-style: normal;
}
.lt {
	float: left;
}
.rt {
	float: right;
}
.clear {
	clear: both;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
/*wrapin 主体容器宽度*/
.wrapin {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
body {
	background:#6699FF;
	background-size: cover;
	padding-top:30px;
	padding-bottom:30px;
}
header {
	height: 60px;
	background:#0066CC;
}
.nav li {
	line-height: 60px;
	float: left;
	width: 14.2%;
	text-align: center;
	font-size: 21px;
}
.nav li a {
	color: #fff;
}
.nav li a:hover{ color:#CCCC33}
.banner {
	display: block;
}
.banner img {
	width: 100%;
	display: block;
}
.txt{ line-height:30px;}
.con {
	padding: 15px;
	background: #fff;
}
.top {
	margin-bottom: 20px;
}
.top .pic {
	float: left;
	width: 240px;
}
.top .pic img {
	border: 1px solid #333;
	padding: 3px;
	width: 100%;
}
.top .text {
	float: right;
	width: 710px;
	line-height: 26px;
}
.top .text h2 {
	font-size: 18px;
}
.title {
	color: #2d1f16;
	line-height: 28px;
	margin: 10px 0;
	
}
.title h2 {
	font-size: 22px; color:#0066CC; border-left:#0066CC solid 7px; padding-left:20px;
}
.more{ display:inline-block; padding:5px 24px; background:#0066CC; margin-top:40px; color:#fff}
.more:hover{ background:#FFCC66; color:#000}
.tupian li {
	float: left;
	width: 23%;
	margin: 1%;
	height: 170px;
}
.tupian li img {
	border: 1px solid #333;
	width: 100%;
	height: 100%;
}
.pinglun {
	margin-bottom: 20px;
}
.pinglun .text {
	line-height: 26px;
}
footer {
	background: #6699CC;
	text-align: center;
	line-height: 50px;
}
.juese li {
	float: left;
	width: 100%;
	height: 270px;
	margin-bottom: 20px;
}
.juese li .pic {
	width: 37%;
	float: left;
	height: 270px;
}
.juese li .pic img {
	width: 100%;
	height: 100%;
	border: 1px solid #333;
}
.juese li .text {
	float: left;
	width: 60%;
	height: 270px;
	background:#eee;

	margin-left: 20px;
	line-height: 26px;
	padding: 15px;
	box-sizing: border-box;
}
.juese li .text h2 {
	font-size: 20px;
	padding-top:50px;
	margin-bottom: 10px;
}
.tit{ text-align:center; font-size:20px; border-bottom:#ccc solid 1px; margin-bottom:20px; padding:15px}
.form span{ text-align:right; width:110px; display:inline-block}
.form  .inp{ padding:8px; width:220px; border:#0066CC solid 1px;}
.form { font-size:18px; float:left; margin-left:50px; margin-top:40px;}
#sub{ background:#0066CC ; width:237px; color:#fff}
.form>div{ margin:20px 0}

#banner {
	width: 100%;
	height:550px;
	position: relative;
}
#banner ul#b_pic li {
	width: 100%;
	height: 550px;
	overflow: hidden;
	position: absolute;
	top: 0;
	display: none;
}
#banner ul#b_pic li img {
	width: 100%;
		height: 550px;
		object-fit:cover;
	display: block;
}
#banner ul#b_an {
	position: absolute;
	width: 100%;
	bottom: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#banner ul#b_an li {
	width: 13px;
	height: 13px;
	background: #86939b;
	margin: 0 3px;
}

六、🥇 如何让学习不再盲目

21年程序员总结给编程菜鸟的16条忠告

  1. 入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。
  2. 多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。
  3. 菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。
  4. 不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。
  5. 没积累足够知识和经验前，你是开发不出一个完整项目的。
  6. 把最新技术挂在嘴边，还不如把过时技术牢记心中。
  7. 活到老学到老，只有一招半式是闯不了江湖的。
  8. 看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。
  9. 书读百遍其义自见，别指望读一遍就能掌握。
  10. 请把教程里的例子亲手实践下，即使案例中有完整源码。
  11. 把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。
  12. 不要漏掉教程中任何一个习题——请全部做完并做好笔记。
  13. 水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。
  14. 每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。
  15. 做好保存源文件的习惯，这些都是你的知识积累。
  16. 遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

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

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

相关文章

Spring循环依赖

Spring循环依赖

一、循环依赖全景图 二、什么是循环依赖问题&#xff1f; 1、什么是循环依赖&#xff1a; 类与类之间的依赖关系形成了闭环&#xff0c;就会导致循环依赖问题的产生。 比如下图中A类依赖了B类&#xff0c;B类依赖了C类&#xff0c;而最后C类又依赖了A类&#xff0c;这样就形…
阅读更多...
免费分享一个springboot+vue学生选课管理系统，挺漂亮的

免费分享一个springboot+vue学生选课管理系统，挺漂亮的

大家好&#xff0c;我是锋哥&#xff0c;看到一个不错的springbootvue前后端分离的学生选课管理系统&#xff0c;分享下哈。 项目介绍 这是一个采用前后端分离开发的项目&#xff0c;前端采用 Vue 开发、后端采用 SpringBoot Mybatis 开发。 项目部署 1. 将 studentms.sql…
阅读更多...
如何将图片在线转换成文字？分享在线转换方法

如何将图片在线转换成文字？分享在线转换方法

怎么把图片转换成文字内容呢&#xff1f;大家在日常中使用的图片文件&#xff0c;很多时候都会拿来记录重要内容&#xff0c;如黑板上的文字来不及记下来就要被擦掉&#xff0c;演示的PPT文件没记完就换页了等操作&#xff0c;这就让我们很多小伙伴养成了用图片拍照或截图来记录…
阅读更多...
Java案例——控制台实现QuickHit小游戏

Java案例——控制台实现QuickHit小游戏

一、需求概述 1.根据输入速率和正确率将玩家分为不同级别 2.级别越高&#xff0c;一次显示的字符数越多&#xff0c;玩家正确输入一次的得分也越高 3.规定时间内完成规定次数的输入&#xff0c;正确率达到规定要求&#xff0c;则升级 4.玩家最高级别为6级、初始级别一律为1…
阅读更多...
chapter4——时钟分频器

chapter4——时钟分频器

目录同步整数分频器具有50%占空比的奇数整数分频非整数分频&#xff08;非50%占空比&#xff09;典型情况下SOC要对设计中各种组件提供许多与相位相关的时钟。将主时钟以2为幂次进行分割来产生同步偶数分频时钟&#xff0c;有时也会需要按奇数或小数进行分频。 同步整数分频器…
阅读更多...
python推导式全局变量多参数传参装饰器

python推导式全局变量多参数传参装饰器

目录 一、推导式运用 二、全局变量 三、多参数传参 四、装饰器 一、推导式运用 # 推导式# for i in range(10): # print(i)# 创建列表 其中奇数位为1&#xff0c; 偶数位为0a[ i for i in range(10)] a2[ 1 if i %2 0 else 0 for i in range(10) ] print(a) print(a2) pr…
阅读更多...
LEADTOOLS 入门教程: 使用文档转换器转换文件 - .NET Core

LEADTOOLS 入门教程: 使用文档转换器转换文件 - .NET Core

LEADTOOLS是一个综合工具包的集合&#xff0c;用于将识别、文档、医疗、成像和多媒体技术整合到桌面、服务器、平板电脑、网络和移动解决方案中&#xff0c;是一项企业级文档自动化解决方案&#xff0c;有捕捉&#xff0c;OCR&#xff0c;OMR&#xff0c;表单识别和处理&#x…
阅读更多...
5款可以在学习和办公上提供帮助的软件

5款可以在学习和办公上提供帮助的软件

今天给大家推荐5个我自己也常用的软件&#xff0c;可以解决很多问题&#xff0c;给你的学习和办公带来巨大帮助。 1.文档检索启动——Listary 最近一直在整理文档&#xff0c;很多笔记和学案都已经不用了&#xff0c;想着进行一个归档&#xff0c;首先对磁盘进行了分区管理&a…
阅读更多...
Spring 简介和基础使用

Spring 简介和基础使用

历史的选择 Spring 作为一个基础的框架&#xff0c;是在 Java EE 开发历史中&#xff0c;是成千上万公司选择。单独使用 Spring 的非常少了&#xff0c;很多都是用 Spring-Boot/Spring-Cloud 来开发&#xff0c;但是 Spring 基础依然是我们使用的基石。我们将一起来聊一聊 Spr…
阅读更多...
算法竞赛入门【码蹄集进阶塔335题】(MT2301-2305）

算法竞赛入门【码蹄集进阶塔335题】(MT2301-2305）

算法竞赛入门【码蹄集进阶塔335题】(MT2301-2305&#xff09; 文章目录算法竞赛入门【码蹄集进阶塔335题】(MT2301-2305&#xff09;前言为什么突然想学算法了&#xff1f;为什么选择码蹄集作为刷题软件&#xff1f;目录1. MT2301 47论2. MT2302 数的增殖3. MT2303 传染病4. MT…
阅读更多...
笔试强训2

笔试强训2

题目1&#xff1a; 倒置字符串_牛客题霸_牛客网 我们先写出代码&#xff1a; #include<iostream> #include<string> using namespace std; int main() {string s;getline(cin, s);reverse(s.begin(), s.end());auto start s.begin();while (start ! s.end()){au…
阅读更多...
AS 打一个正式签名的包

AS 打一个正式签名的包

如何打一个带正式签名文件的app (给自己的劳动成果冠名) 1. 选择build -> generate signed bundle/apk 2. 这里有两个选择, bundle or apk, 我们选择apk 于是勾选 apk, 并点下一步 3. 来到选择证书文件的地方, 但是我们这是第一次做, 还没有证书文件, 所以选择新建一个证…
阅读更多...
车路协同云控平台建设实践

车路协同云控平台建设实践

前言 随着汽车工业水平飞速发展&#xff0c;以及 IoT、5G、V2X 等信息通信技术的发展演进&#xff0c;通过汽车的智能化、网联化升级为大众带来更智能、更便捷的驾乘体验&#xff0c;成为汽车行业的发展趋势&#xff0c;自动驾驶、智能网联汽车成为行业热点。近年来&#xff0…
阅读更多...
Dubbo集成Nacos作为注册中心

Dubbo集成Nacos作为注册中心

Nacos简介 什么是Nacos? Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service的首字母简称&#xff0c;一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了一组简单易用的特性集&#…
阅读更多...
数据要素市场研究资料合集

数据要素市场研究资料合集

编 辑&#xff1a;彭文华来 源&#xff1a;大数据架构师彭友们好&#xff0c;我是老彭。最近有个博士彭友在为论文挠头&#xff0c;到处找数据要素市场的资料。正好&#xff0c;国家工业信息安全发展研究中心刚刚发布《中国数据要素市场发展报告&#xff08;2021-2022&#xff…
阅读更多...
智能合约介绍

智能合约介绍

介绍 智能合约是区块链实现可编程化的重要工具&#xff1b;在比特币时期&#xff0c;脚本仅限于描述交易得到内容和状态&#xff1b;随着智能合约的出现可以定义任何数据对象的状态擦欧总——>使其成为网络上的“法律条文”或者“商业共识”。相当于网络中的道德准则&#…
阅读更多...
基于GIS的生态安全网络格局构建之主成分分析

基于GIS的生态安全网络格局构建之主成分分析

来源&#xff1a;GIS前沿 一、数据来源介绍 &#xff08;一&#xff09;数字高程数据、归一化植被指数数据 本文所用到的松原市宁江区数字高程数据采用30 m分辨率的GDEMV 3数字高程数据、归一化植被指数数据采用250m分辨率的MYD13Q1植被指数16天合成产品&#xff0c;这些数据…
阅读更多...
【零基础入门SpringMVC】第五期——报文、文件转移、拦截器、异常处理器

【零基础入门SpringMVC】第五期——报文、文件转移、拦截器、异常处理器

一、HttpMessageConverter 代表报文信息转化器&#xff0c;可以将请求报文转换为Java对象&#xff0c;也可以将Java对象转换为响应报文 请求报文分为三部分&#xff1a;请求头、请求空行和请求体 post 请求才会生成请求体get 请求会把请求信息拼接到地址后 概述&#xff1a;这…
阅读更多...
经验分析：数据可视化工具入门讲解，如何应用数据可视化

经验分析：数据可视化工具入门讲解，如何应用数据可视化

什么是数据可视化&#xff1f;最核心的要点&#xff0c;就是解释数据、进行信息传递、压缩数据信息、突出整体观点。 在分析过程中&#xff0c;通过比较数据的大小、差异、分布&#xff0c;让其轻松呈现。 今天小编给大家介绍一款优秀的在线数据可视化软件。 项目是个人创建的…
阅读更多...
第一性原理谈安全性和可靠性

第一性原理谈安全性和可靠性

已剪辑自: https://mp.weixin.qq.com/s/jttd-dhv9PmNu25Z-zyd5Q 最近从各个行业对系统的安全性的关注度越来越高&#xff0c;10月28日&#xff0c;工信部公开征求的《道路机动车辆生产准入许可管理条例&#xff08;征求意见稿&#xff09;》中&#xff0c;第六条提出&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023