📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

A29JP 钢铁侠电影下拉音乐滚字表单三级（9页）

🧩 2.图片演示

WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计_网页设计

WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计_学生网页作业_02

WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计_web前端_03

WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计_web课程与设计_04

WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计_web课程与设计_05

WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计_学生网页作业_06

WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计_web前端_07

WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计_学生网页作业_08

WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计_网页设计_09

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!----网站头部开始---->
<div class="top"></div>
<div class="nav">
  <ul class="nav_menu">
    <li class="nav_menu-item"><a target="_blank" href="index.html" >网站首页</a></li>
    <li class="nav_menu-item"><a target="_blank" href="about.html" >关于电影</a>
      <ul class="nav_submenu">
        <li class="nav_submenu-item"> <a target="_blank" href="about.html" >电影简介</a></li>
        <li class="nav_submenu-item"> <a target="_blank" href="fangkong.html" >剧情简介</a></li>
        </ul>
    </li>
    <li class="nav_menu-item"><a target="_blank" href="xinwen.html" >电影资讯</a></li>
    <li class="nav_menu-item"><a target="_blank" href="yingxiong.html" >电影剧照</a></li>
    <li class="nav_menu-item"><a target="_blank" href="xiangce.html" >电影图鉴</a></li>
    <li class="nav_menu-item"><a target="_blank" href="zhuce.html" >会员注册</a></li>
  </ul>
</div>
<!-----网站头部结束-------------->
<!------网站主体部分开始----------------------->
<div class="main">
<div class="banner">
<img src="images/banner.jpg" />
</div>
<div class="nr">
<marquee scrolldelay="400" scrollamount="100" class="gundong">欢迎来到电影《钢铁侠3》网站。</marquee>
<div class="tit-s">电影简介<span><a target="_blank" href="about.html">更多 > ></a></span></div>
<div class="box1">
<div class="box1-left"><img src="images/gr.jpg" /></div>
<div class="box1-right">
<P>《钢铁侠3》是2013年上映的超级英雄电影。改编自漫威同名经典漫画，是漫威电影宇宙的第七部影片，同时也是漫威电影宇宙第二阶段的首部电影，由沙恩·布莱克执导，小罗伯特·唐尼、格温妮丝·帕特洛、唐·钱德尔、盖·皮尔斯、Paul Bettany等参加演出。《钢铁侠3》故事时间发生在《复仇者联盟》纽约大战结束半年之后，讲述了托尼·斯塔克的生活被强敌毁灭殆尽，无路可退的他必须依靠精良的高科技装备以及过人才智，保护自己和身边最亲近的人，同时揪出真正的幕后元凶。该片于2013年5月1日中国上映，同步登陆IMAX银幕。</P>
<P>托尼·斯塔克遭遇到强敌挑战，这个人毁坏了托尼·斯塔克的生活，斯塔克为前所未有的焦虑症所困扰。与此同时，臭名昭著的恐怖头目满大人（本·金斯利 ben kingsley 饰）制造了一连串的爆炸袭击事件，托尼当年最忠诚的保镖即在最近的一次袭击中身负重伤。未过多久，托尼、佩珀以及曾与他有过一面之缘的女植物学家玛雅（丽贝卡·豪尔rebecca hall 饰）在家中遭到猛烈的炮火袭击，几乎丧命，而这一切都与13年前那名偶然邂逅的科学家阿尔德里奇·基连（盖·皮尔斯 guy pearce 饰）及其终极生物的研究有关。</P>
</div>

</div>
<div class="tit-s">电影图鉴<span><a target="_blank" href="xiangce.html">更多 > ></a></span></div>
<div class="caiz">
<ul>
<li><a target="_blank" href="xiangce.html"><img src="images/dg1.jpg"><p>图一</p></a></li>
<li><a target="_blank" href="xiangce.html"><img src="images/dg2.jpg"><p>图二</p></a></li>
<li><a target="_blank" href="xiangce.html"><img src="images/dg3.jpg"><p>图三</p></a></li>
<li><a target="_blank" href="xiangce.html"><img src="images/dg4.jpg"><p>图四</p></a></li>
</ul>
</div>
<div class="tit-s">电影资讯<span><a target="_blank" href="huodong.html">更多 > ></a></span></div>
<div class="news-box">
<ul>
<li class="mar30"><a target="_blank" href="#.html">
<img class="scm" src="images/neir01.jpg">
<h1>钢铁侠的6个救命恩人，直接成就了他</h1>
<p>你拯救世界，我来拯救你，想要能够成为超级英雄，除了自己本身的能力，还需要朋友的帮助，否则能力再大.....</p>
<p>2020-12-02   admin   <span>548</span></p>
</a>
</li>
<li><a target="_blank" href="#.html">
<img class="scm" src="images/neir02.jpg">
<h1>《钢铁侠3》的绝境病毒是永生的关键？</h1>
<p>漫威电影宇宙中有相当多奇奇怪怪的科技，只有你想不到，没有他们倒腾不出来的。.....</p>
<p>2020-12-02   admin   <span>642</span></p>
</a>
</li>

</ul>
</div>
</div>

</div>
<div class="foot">
<div class="banq">
版权所有 @钢铁侠3电影网站
</div>
</div>
<embed src="images/hero.mp3" autostart="true" loop="true" hidden="true"></embed>
</body>
</html>

🏠CSS样式代码

.liuyan-right {
  width: 540px;
  height: 600px;
  float: left;
}

.l-anniu {
  width: 150px;
  height: 40px;
  background: #da251c;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #FFF;
  margin: 0 auto;
  margin-top: 45px;
  margin-bottom: 97px;
}

.l-liuyan {
  width: 520px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
}

.l-liuyan input {
  width: 330px;
  height: 30px;
  border: #cecccc 1px solid;
  float: left;
  margin-right: 30px;
  margin-bottom: 20px;
  padding-left: 30px;
  font-size: 16px;
  float: left;
}

.l-liuyan span {
  float: left;
  line-height: 30px;
  font-size: 18px;
  width: 120px;
}

.foot {
  width: 1000px;
  height: 83px;
  background: #b20300;
  margin: 0 auto;
  padding-top: 20px;
}

.banq {
  width: 1000px;
  height: 40px;
  line-height: 40px;
  color: #FFF;
  margin: 0 auto;
  text-align: center;
  font-family: "仿宋";
  font-size: 12px;
}