HTML期末作业课程设计期末大作业——电影网页制作

最新推荐文章于 2024-10-26 17:55:58 发布
最新推荐文章于 2024-10-26 17:55:58 发布
阅读量258 收藏
点赞数 1
分类专栏： 网页设计与制作 文章标签： web学生网页作业 网页设计 学生个人网页制作 学生期末网页作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38514421/article/details/128543249
版权

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

精彩专栏推荐👇🏻👇🏻👇🏻👇🏻

❤ 【作者主页——获取更多优质源码】
❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】

文章目录

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述

二、代码展示

1.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>Document</title>

<link rel="stylesheet" href="styles/main.css" type="text/css" />

</head>
<body>

<div id="top-w">
	<div class="top l">
		<a class="qq" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1810015588&amp;site=qq&amp;menu=yes" target="_blank" style="font-size:11px;">
			<i class="icon-qq"></i>&nbsp;QQ在线客服: 1810015588
		</a>

		<div class="tel">
			 <img src="styles/t1.jpg" alt="">全国客服专线: 021-62519993
		</div>
	</div>
</div>

<div id="nav-w">
	<div class="nav l">
		<div class="logo">
			<a href="#">
				<img src="styles/logo.jpg" alt="">
			</a>
		</div>
		<ul class="menu">
			<li><a href="">首页</a>
			</li>

			<li><a href="">公司简介</a>
			</li>

			<li><a href="">案例展示</a>
			</li>

			<li><a href="">服务项目</a>
			</li>

			<li><a href="">活动公告</a>
			</li>

			<li><a href="">联系我们</a>
			</li>

			<div class="c"></div>
		</ul>
		<div class="c"></div>
	</div>
</div>	


<div id="slider">
	<!-- 代码部分begin -->
	<link href="styles/slider/css/style.css" rel="stylesheet" type="text/css">
	<div id="focusBar"> 
		<a href="javascript:void(0)" class="arrL" onClick="prePage()"></a>
		<a href="javascript:void(0)" class="arrR" onClick="nextPage()"></a>
		<ul class="mypng">
			<li id="focusIndex1" style="background:url(styles/slider/images/2.jpg) no-repeat center center; display:block;"><!--此处需判断li的display:block-->
				<div class="focusL"><a href="#"><img src="styles/slider/images/5.png" width="1920" height="450" /></a></div>
				<div class="zhezhao" ><a href="#"><img src="styles/slider/images/8.png" width="1920" height="450" /></a></div>
				<div class="focusR"><a href="#"><img src="styles/slider/images/9.png" width="1920" height="450" /></a></div>
			</li>
			<li id="focusIndex2" style="background:url(styles/slider/images/1.jpg) no-repeat center center; display:none;">
				<div class="focusL"><a href="#"><img src="styles/slider/images/5.png" width="1920" height="450" /></a></div>
				<div class="zhezhao" ><a href="#"><img src="styles/slider/images/7.png" width="1920" height="450" /></a></div>
				<div class="focusR"><a href="#"><img src="styles/slider/images/6.png" width="1920" height="450" /></a></div>
			</li>
			<li id="focusIndex3" style="background:url(styles/slider/images/2.jpg) no-repeat center center; display:none;">
				<div class="focusL"><a href="#"><img src="styles/slider/images/5.png" width="1920" height="450" /></a></div>
				<div class="zhezhao" ><a href="#"><img src="styles/slider/images/8.png" width="1920" height="450" /></a></div>
				<div class="focusR"><a href="#"><img src="styles/slider/images/9.png" width="1920" height="450" /></a></div>
			</li>
			<li id="focusIndex4" style="background:url(styles/slider/images/1.jpg) no-repeat center center; display:none;">
				<div class="focusL"><a href="#"><img src="styles/slider/images/5.png" width="1920" height="450" /></a></div>
				<div class="zhezhao" ><a href="#"><img src="styles/slider/images/7.png" width="1920" height="450" /></a></div>
				<div class="focusR"><a href="#"><img src="styles/slider/images/6.png" width="1920" height="450" /></a></div>
			</li>
		</ul>
	</div>
	<script src="styles/slider/js/jquery.min.js"></script>
	<script src="styles/slider/js/jquery.easing.1.3.js"></script>
	<script src="styles/slider/js/script.js"></script>
	<!-- 代码部分end -->
</div>

<div id="banner-w">
	<div class="banner l">
		<h2>汤池在此，灵魂在此！</h2>
		<p>2012年8月，汤池本人已离开“汤池印象”品牌，携原班人马重新创办独立的“香港汤池电影工作室”。以高端限量为理念，创造电影级的个人影像。本工作室注册在香港，总部设在上海，面向全球服务。</p>
	</div>
</div>



<div id="pro" class="l">
	<h2>香港汤池电影——最新作品欣赏</h2>
	<ul>
		<li>
			<a href="">
				<h3>期，许</h3>
				<img src="styles/pro1.jpg" alt="">
				<h3>婚礼微电影</h3>
			</a>
		</li>
		<li>
			<a href="">
				<h3>期，许</h3>
				<img src="styles/pro1.jpg" alt="">
				<h3>婚礼微电影</h3>
			</a>
		</li>
		<li>
			<a href="">
				<h3>期，许</h3>
				<img src="styles/pro1.jpg" alt="">
				<h3>婚礼微电影</h3>
			</a>
		</li>
		<li>
			<a href="">
				<h3>期，许</h3>
				<img src="styles/pro1.jpg" alt="">
				<h3>婚礼微电影</h3>
			</a>
		</li>
		<li>
			<a href="">
				<h3>期，许</h3>
				<img src="styles/pro1.jpg" alt="">
				<h3>婚礼微电影</h3>
			</a>
		</li>
		<li>
			<a href="">
				<h3>期，许</h3>
				<img src="styles/pro1.jpg" alt="">
				<h3>婚礼微电影</h3>
			</a>
		</li>
		<div class="c"></div>
	</ul>
</div>





<div id="active-w">
	<div id="active" class="l">
		<div class="item">
			<h2>［新西兰续订］再度推出2015年4月的新西兰皇后镇婚纱旅拍行动，每对4.38万</h2>
			<p>梦幻新西兰旅拍，首推24小时售罄，现再推出4月计划，婚纱照＋MV＝4.38万／对（含新人往返机票及拍摄日住宿）。仅限4对名额，速度你懂的。</p>
		</div>
		<div class="btn">
			<a href="">进入活动</a>
		</div>
		<div class="c"></div>
	</div>
</div>

<div id="foot-w">
	<div class="foot l">
		<ul class="about">
			<li>关于我们</li>
			<p>香港汤池电影工作室是汤池本人离开"汤池印象"品牌后，汤池携原班人马重新注册成立的影像服务机构。</p>
			<li><img src="styles/wei.jpg" alt="">新浪微博</li>
			<li><img src="styles/fei.jpg" alt="">FACEBOOK</li>
			<li><img src="styles/xin.jpg" alt="">官方微信</li>
		</ul>


		<ul class="about">
			<li>工作时间</li>
			<p>为了避免不必要的等待，敬请注意我们的工作时间 。以下是我们的正常工作时间，中国大陆法定节假日除外。</p>
			<li><img src="styles/t.jpg" alt="">工作日 10:00-18:30</li>
			<li><img src="styles/t.jpg" alt="">周六 10:00-18:30</li>
			<li><img src="styles/t.jpg" alt="">周日 休息</li>
		</ul>

		<ul class="about">
			<li>上海总部</li>
			<p>上海八号洋房<br><br>

				上海市长宁区江苏路284弄8号</p>
			<li><img src="styles/tel.jpg" alt="">+86 21 62519993</li>
			<li><img src="styles/phone.jpg" alt="">+86 21 32095335</li>
			<li><img src="styles/q.jpg" alt=""> 1810015588、1810025588</li>
		</ul>



		<div class="c"></div>
	</div>
</div>


<div id="copy-w">
	<div class="copy l">
		<h2>TANGFILM HK</h2>

		<p>
			<span>

			<a href="">Home</a>&nbsp;|&nbsp;
			<a href="">About</a>&nbsp;|&nbsp;
			<a href="">Contact</a>

			</span>
			Copyright 2004-2014 - 香港汤池工作室 版权所有 站长统计 沪ICP备14029448-1
		</p>
		
	</div>
</div>


</body>
</html>

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
  5. 要有JS特效，如定时切换和手动切换图片新闻；
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
  7. 页面清爽、美观、大方，不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、精彩推荐

1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。

2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题可以相互学习交流

在这里插入图片描述

STU学生网页设计
关注
专栏目录
大学生HTML期末大作业——HTML+CSS+JavaScript人物明星（周杰伦）
...
10-10 5025
HTML+CSS+JS【人物网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站
最新发布
...
11-12 2798
HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
HTML期末大学生网页设计作业——奇恩动漫HTML (1页面) HTML+CSS+JS网页设计期末课程大作业
QQ_____365392777的博客
08-12 261
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
学生HTML个人网页作业作品~蛋糕甜品店铺共11个页面(HTML+CSS+JavaScript)
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-01 3万+
学生HTML个人网页作业作品~ 个人主页博客网页设计制作~ 大学生个人网站作业模板~简单个人网页制作 ~面包店铺电商网站模板html 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 红色的蛋糕甜品在线预订，面包店铺电
HTML期末大作业——基于HTML+CSS+JavaScript的旅游网站设计与实现
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-23 2万+
HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现 HTML期末作业-旅游网页作业HTML+CSS+JavaScript实现，共有登录 首页 预定 套餐 服务 相册 评价 联系我们等页面 旅游网站的页面通常设计得很宽，而且搭配非常有吸引力的图片，目的是为了突出视觉吸引力。今天这篇文章向大家分享最佳旅游网站设计案例，一起欣赏这些精美的网站。 作品演示 1.登录 2.首页 3.预定 4.套餐 5.服务 6.相册 7.评价/联系我们 文件目录 代码实现 头部HTML
web前端期末大作业 ~我的家乡-绿城之都html+css+javascript旅游网页设计实例
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-05 1万+
web前端期末大作业 ~ 我的家乡-绿城之都html+css+javascript旅游网页设计实例 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：绿色简单旅游景点介绍网站，全套模板，包括首页、
HTML期末作业课程设计期末大作业——我的美丽家乡湛江 海鲜之都
08-10
通过上述分析，我们可以看出这个HTML期末大作业不仅在设计和技术层面上展现出了较高的水准，而且非常适合作为学习资料来帮助初学者理解网页设计的基本原理和技术要点。无论是对于想要提升自己网页设计技能的学生来说...
HTML期末大作业
11-24
这是我自己做的HTML期末大作业，花了很多时间，稍加修改就可以作为自己的作业了，而且也可以作为学习参考
HTML期末作业-宠物网
学生期末作业
06-16 2076
HTML期末大作业-宠物网 <html> <head> <title>宠物</title> <link rel="shortcut icon" type="image/x-icon" href="img/upimages/favicon.ico" /> <script type="text/javascript" src="js/comm/jquery.min.js"></script> <s..
HTML5期末大作业：大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-28 8981
HTML5期末大作业：个人网站设计——个人博客网站模板(13页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？ 2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非
html期末大作业
12-18
html期末大作业,可以供选修了html网页的课的同学应付老师……
html期末作业-房屋交易系统
qq_62447327的博客
01-30 1055
1、系统主界面。主界面命名为zf.html，左侧登录界面和右侧登录界面通过iframe嵌入，分别命名为left.html和main.html。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="css-zf.css" rel="stylesheet" type="text/css"> &lt
web网页设计期末课程大作业——电影介绍5页HTML+CSS制作
08-10
- **DIV+CSS布局**: 使用`<div>`标签结合CSS来实现网页布局，是现代网页设计的基本方法。例如，`<div id="header">`用于创建头部区域。 - **多媒体元素**: 通过`<audio>`标签插入音频文件，支持循环播放`loop`和...
大学生HTML期末大作业——HTML+CSS+JavaScript名侦探柯南
...
10-26 1794
HTML+CSS+JS【动漫网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
html期末大作业 html期末大作业
06-01
html期末大作业 html期末大作业
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

STU学生网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值