HTML+CSS大作业: 抗击疫情网页制作作业_疫情防控网页设计模板HTML_ 简单学生网页设计_静态HTML+CSS网站制作成品

时间:2024-02-20 08:41:21

HTML+CSS大作业: 抗击疫情网页制作作业_疫情防控网页设计模板HTML_ 简单学生网页设计_静态HTML+CSS网站制作成品

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 :抗击疫情网页制作作品采用DIV CSS布局制作,网页共5个页面:首页、疫情数据、发现经过、传播途径、防护指南。网页制作采用学生基础水平设计,代码简单。

2.网页作品编辑方面:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)

3.网页作品布局方面:顶部BANNER大图为100%自适应屏幕宽度,网页主体内容区宽度为1200PX,设计方面使用CSS设计了网页背景颜色、导航鼠标经过变色、导航分割线等。

@

一、作品演示

1.作品首页

在这里插入图片描述

2.疫情数据

在这里插入图片描述

3.发现经过

在这里插入图片描述

4.传播途径

在这里插入图片描述

5.防护指南

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>疫情记忆</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/slideshow.css" rel="stylesheet" />
</head>

<body>
<div id="top">
  <div id="above">
    <div id="Logo"><a href="index.html"><img src="images/logo.png" width="180" height="50"></a></div>
    <div id="search">
      <label for="textfield"></label>
      <input name="textfield" type="text" id="textfield" value="  搜索" maxlength="15">
    </div>
    <div id="login"><a href="login.html">注册账号</a></div>
  </div>
</div>
 <!-- 导航条代码 开始 -->
 <div class="nav">
   <ul class="list">
     <li><a href="index.html">首页</a></li>
     <li><a href="#">疫情记忆 <img src="images/down.svg" alt="" width="12" height="12"></a>
       <div class="down"> <a href="article.html"> 人物</a> <a href="page.html"> 城市</a> <a href="list.html"> 世界</a></div>
     </li>
     <li><a href="photo.html">相关图库</a></li>
     <li><a href="login.html">注册/登录</a><a href="about.html"></a></li>
   </ul>
 </div>
 <!-- 导航条代码 结束 -->
<div id="main-960">
<!-- 代码 开始 -->
  <div id="yc-mod-slider">
    <div class="wrapper">
            <div id="slideshow" class="box_skitter fn-clear">
                <ul>
                    <li>
                        <img class="cubeRandom" src="images/slider1.jpg" /></li>
                    <li>
                        <img class="cubeRandom" src="images/slider2.jpg" /></li>
                    <li>
                        <img class="cubeRandom" src="images/slider3.jpg" /></li>
                        <li>
                        <img class="cubeRandom" src="images/slider4.jpg" /></li>
                        <li>
                        <img class="cubeRandom" src="images/slider5.jpg" /></li>
                </ul>
            </div>
            <script type="text/javascript" src="js/slideshow.js"></script>
        </div>
    </div>
    <!-- 代码 结束 -->
  <div id="aright">
    <div id="atishi">勠力同心 勇往直前</div>
  </div>
  <div id="aright2">
    <div id="image104"><a href="#"><img src="images/sf01.jpg" width="219" height="104"></a></div>
    
    <div id="image104"><a href="#"><img src="images/sf02.jpg" width="219" height="104"></a></div>
  </div>
</div>
<div id="im01">
  <div id="text002">新型冠状病毒肺炎(Corona Virus Disease 2019,COVID-19),简称“新冠肺炎”,世界卫生组织命名为“2019冠状病毒病” [1-2]  ,是指2019新型冠状病毒感染导致的肺炎。2019年12月以来,湖北省武汉市部分医院陆续发现了多例有华南海鲜市场暴露史的不明原因肺炎病例,证实为2019新型冠状病毒感染引起的急性呼吸道传染病。</div>
    <div id="anniu" class="d_out" onmouseover="this.className=\'d_over\'" onmouseout="this.className=\'d_out\'"><a href="page.html">观看视频</a></div>
    <div id="anniu1" class="d_out" onmouseover="this.className=\'d_over\'" onmouseout="this.className=\'d_out\'"><a href="list.html">了解更多</a></div>
  </div>
  <div class="div_first">
        <div class="div_second">
            <img src="images/slider01.jpg" alt=""><img src="images/slider02.jpg" alt=""><img src="images/slider03.jpg" alt=""><img src="images/slider04.jpg" alt="">
        </div>
</div>
<div id="main-more"><table width="100%" height="318" border="0">
  <tr>
    <td align="left"><a href="article.html"><img src="images/renwu.jpg" width="308" height="307"></a></td>
    <td align="center"><a href="page.html"><img src="images/chengshi.jpg" width="308" height="307"></a></td>
    <td align="right"><a href="list.html"><img src="images/shijie.jpg" width="308" height="307"></a></td>
  </tr>
</table>
</div>

<div id="music"><table width="100%" border="0">
  <tr>
    <td width="38%" height="55" align="center"><audio src="media/music.mp3" controls autoplay></audio></td>
    <td width="62%"><marquee>君をのせて (天空の城ラピュタ)</marquee></td>
  </tr>
</table>
</div>

<!-- footer代码 开始 -->
<footer>
<div id="footer_all">
  <div id="f1170-167">
    <div id="logo-175-40"><a href="index.html"><img src="images/logo.png" width="180" /></a></div>
    <div class="aye" id="login">
      <table width="103" border="0">
        <tr>
          <td width="97" height="37" align="left"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?yqjy" class="ayahei">了解更多</a></td>
        </tr>
      </table>
    </div>
    
    <div class="aye" id="login">
      <table width="103" border="0">
        <tr>
          <td width="97" height="37" align="left"><span class="ayahei"><a href="login.html">注册账号</a></span><a href="Login.html"></a></td>
        </tr>
      </table>
    </div>
    
    <div id="right828-167">
      <div id="l-828-80">
        <div id="r-150-42"><a href="#"><img src="images/fb.png" width="45" height="45"></a></div>
        <div id="r-150-42-1"><a href="#"><img src="images/tw.png" alt="" width="45" height="45"></a></div>
        <div id="r-150-42-1"><a href="#"><img src="images/ins.png" alt="" width="45" height="45"></a></div>
      </div>
      <div id="r-lianjie"><table width="100%" border="0">
  <tr>
    <td align="right">© 疫情记忆&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;</td>
  </tr>
</table>
</div>
    </div>
  </div>
  <div id="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym" target="_blank"><img src="images/lxidw7.svg" width="1000" height="36"></a></div>
</div>
</footer>
<!-- 代码 结束 -->
</body>
</html>


四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述


五、源码获取

❉ ~ 关注我,点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

❉3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

在这里插入图片描述

六、更多HTML期末大作业(成品下载)

>>>戳我>>>点击进入200例期末大作业作品

200多例 HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述
在这里插入图片描述