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

admin管理员组
文章数量:1794759

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

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻 💂 作者主页: 【进入主页—🚀获取更多源码】 🎓 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" "www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3/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; }

五、🎁更多源码

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

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

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

本文标签：作业网页静态期末课程设计

版权声明：本文标题：WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686623460a87575.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。