html电影网页设计代码-html钢铁侠电影网页介绍(9页)

web网页作品设计

于 2024-11-07 10:20:25 发布

阅读量1.1k

点赞数 30

分类专栏： html影视网页制作【code.weylin.cn】文章标签： html 前端课程设计 css 传媒

本文链接：https://blog.youkuaiyun.com/qq_40486643/article/details/143586710

版权

html影视网页制作【code.weylin.cn】专栏收录该内容

36 篇文章

订阅专栏

📒 web网页设计期末课程大作业:html钢铁侠电影网页介绍(9页)

大学生个人网页设计 HTML个人网页制作 web个人网站模板简单静态HTML个人网页作品

该首页代码采用了DIV盒子的布局方法，展示了盒子嵌套、浮动、边距、边框和背景等属性的运用。外部大盒子实现居中，内部布局为左右中结构，底部则是横向浮动排列。代码中涵盖了大学前端学习的知识点和布局技巧，CSS代码量丰富且细致，通过hover效果实现过渡和鼠标滑过效果。此外，页面中使用表格和表单来补充功能，方便新手学习。某些源码页面未使用JS，需者可自行添加。

涵盖个人、电影、美食、动漫、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、摄影、文化、家乡、鲜花、礼品、汽车等多个网页设计主题，能够满足大学生在网页大作业中的需求！

页面结构： 分为页头、菜单导航栏（最好支持下拉）、主要内容区域和页脚四大部分。
页面链接： 所有页面应互相超链接，支持三级页面，整体结构为5-10个页面。
样式统一： 页面样式需统一且布局正常，使用Div+CSS技术确保无错乱。
美观的菜单： 菜单设计应美观且醒目，二级菜单可正常弹出和跳转。
JS特效： 需要有如定时和手动切换的图片轮播等JS特效。
多媒体元素： 页面中应包含多媒体元素，如GIF、视频和音乐，并运用表单技术。
清爽美观： 页面设计应清新、优雅，避免雷同。

整体上，不仅要能展示用户需求的内容，还需确保良好的布局、优雅的界面、恰当的配色以及多样的表现形式。

一、📖 作品介绍

网页作品简介： 该设计达到了HTML网页设计A++水平，部分支持手机和PC的响应式布局。
网页作品编辑： 此作品为学生网页设计类型，代码采用简单的学生水平的HTML+CSS布局制作。下载后可使用任何HTML编辑软件（如：DW、HBuilderX、Vscode、Sublime Text、Webstorm、Notepad++等）进行编辑和修改。
网页作品布局： 整体采用响应式布局，包含LOGO、导航、主体内容等布局。子页面有多种布局方式，兴趣爱好内容使用图片列表展示，成绩页面插入了表格，联系我们页面则使用了左对齐的图片布局。
网页作品技术： 使用DIV+CSS制作网页，包含背景图、音乐、视频、Flash、滚动文字、CSS特效、鼠标悬停效果、导航变色、表单提交及评论留言功能，并通过JavaScript进行表单验证（确保提交时表单不能为空）。

提示：以下是本篇文章正文内容，下面案例可供参考

二、🌐 效果演示

请添加图片描述
在这里插入图片描述

三、🪓 代码实现

🧱 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">更多&nbsp;> ></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">更多&nbsp;> ></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">更多&nbsp;> ></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&nbsp;&nbsp;&nbsp;admin&nbsp;&nbsp;&nbsp;<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&nbsp;&nbsp;&nbsp;admin&nbsp;&nbsp;&nbsp;<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样式代码

代码如下（示例）：

.caiz {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.caiz ul {
	margin-top: 20px;
	padding: 0px 10px;
}

.caiz ul li {
	width: 233px;
	height: 250px;
	padding: 5px;
	float: left;
}

.caiz ul li img {
	width: 230px;
	height: 200px;
}

.caiz ul li p {
	font-size: 14px;
	line-height: 24px;
	text-align: center;
}

.geyan {
	padding: 20px;
}

.neirong {
	width: 960px;
	height: auto;
	overflow: hidden;
	background: #FFF;
	padding: 20px;
}

.neirong p {
	text-indent: 2em
}

.neirong img {
	display: block;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

.title {
	font-size: 16px;
	height: 80px;
	line-height: 40px;
	width: 960px;
	margin: 0 auto;
	text-align: center;
	color: #333;
	margin-left: 20px;
	font-weight: bold;
	border-bottom: #CCC 1px dashed;
	margin-bottom: 20px;
}

.title2 {
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	text-align: center;
	color: #999;
	font-weight: normal;
}

.title2 span {
	background: url(../images/ico01.jpg) 0px 0px no-repeat;
	padding-left: 20px;
	color: #666 !important;
	font-weight: normal;
}

.liuyan {
	padding: 0px 20px;
}

.liuyan {
	height: 460px;
	margin: 0 auto;
	margin-top: 30px;
}

.liuyan-left {
	width: 400px;
	height: 460px;
	float: left;
	background: url(../images/box12-1.jpg) no-repeat;
}

.liuyan-right {
	width: 540px;
	height: 460px;
	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;
}

四、📁 目录结构

├── about.html
├── css
│ └── style.css
├── fangkong.html
├── images
│ ├── 05.jpg
│ ├── 06.jpg
│ ├── 07.jpg
│ ├── 08.jpg
│ ├── 09.jpg
│ ├── 10.jpg
│ ├── 11.jpg
│ ├── about.jpg
│ ├── banner.jpg
│ ├── banner1.jpg
│ ├── banner2.jpg
│ ├── banner3.jpg
│ ├── banner4.jpg
│ ├── banner5.jpg
│ ├── banner6.jpg
│ ├── banner7.jpg
│ ├── banner8.jpg
│ ├── box12-1.jpg
│ ├── dg1.jpg
│ ├── dg2.jpg
│ ├── dg3.jpg
│ ├── dg4.jpg
│ ├── dg5.jpg
│ ├── dg6.jpg
│ ├── dg7.jpg
│ ├── dg8.jpg
│ ├── gr.jpg
│ ├── hero.mp3
│ ├── ico01.jpg
│ ├── neir01.jpg
│ ├── neir02.jpg
│ └── top-bg.jpg
├── index.html
├── xiangce.html
├── xinwen.html
├── xinwen01.html
├── xinwen02.html
├── yingxiong.html
└── zhuce.html

五、💡 博主建议

第一，明确学习目标
在进行学习时，无论是通过阅读、参加课程还是参与线下活动，都要设定清晰的目标。思考你想要解决的问题或希望实现的具体目标，这样能够更有针对性地进行学习。
第二，从实战中学习
单纯的理论学习往往难以记忆和应用，因此实践是关键。初学者可以通过模仿和重写已有的代码来加深理解。实战经验不仅能巩固基础，还能快速提升技能。
第三，建立个人知识体系
知识无穷无尽，面对浩瀚的书籍和信息，我们需要理清思路，避免迷失。每一个知识点都有其特定的背景和边界，通过归纳和整理，可以形成自己的知识体系，帮助更好地理解和应用。
第四，将所学应用于实践
学到的知识必须与实际工作和生活结合起来。每天学习的新知识应当与现实情况联系，通过实践来验证和深化理解。热爱学习是值得赞扬的，但能有效应用知识的人才是真正有价值的。