一、📚作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、🔗作品效果
▶️视频演示
https://live.csdn.net/v/embed/239792
(title-A29JP 钢铁侠电影下拉音乐滚字表单三级（9页）)]
🧩 截图演示
09.png
08.png
07.png
06.png
05.png
04.png
03.png
02.png
01.png
三、💒 作品代码
🧱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;
}
四、🎁更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
