🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码二、📚网站介绍
📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面:计划采用最新的网页编程语言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代码)。
三、🔗网站效果
▶️1.视频演示
A29JP 钢铁侠电影下拉音乐滚字表单三级(9页)
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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》是上映的超级英雄电影。改编自漫威同名经典漫画,是漫威电影宇宙的第七部影片,同时也是漫威电影宇宙第二阶段的首部电影,由沙恩·布莱克执导,小罗伯特·唐尼、格温妮丝·帕特洛、唐·钱德尔、盖·皮尔斯、Paul Bettany等参加演出。《钢铁侠3》故事时间发生在《复仇者联盟》纽约大战结束半年之后,讲述了托尼·斯塔克的生活被强敌毁灭殆尽,无路可退的他必须依靠精良的高科技装备以及过人才智,保护自己和身边最亲近的人,同时揪出真正的幕后元凶。该片于5月1日中国上映,同步登陆IMAX银幕。</P><P>托尼·斯塔克遭遇到强敌挑战,这个人毁坏了托尼·斯塔克的生活,斯塔克为前所未有的焦虑症所困扰。与此同时,臭名昭著的恐怖头目满大人(本·金斯利 ben kingsley 饰)制造了一连串的爆炸袭击事件,托尼当年最忠诚的保镖即在最近的一次袭击中身负重伤。未过多久,托尼、佩珀以及曾与他有过一面之缘的女植物学家玛雅(丽贝卡·豪尔rebecca hall 饰)在家中遭到猛烈的炮火袭击,几乎丧命,而这一切都与前那名偶然邂逅的科学家阿尔德里奇·基连(盖·皮尔斯 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>-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>-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;}
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻