web网页设计作业-html橙色国外电影(13页)

于 2024-12-09 15:19:35 发布
阅读量790 收藏 10
点赞数 27
分类专栏： html影视网页制作【code.weylin.cn】 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40486643/article/details/144348906
版权

📒 web网页设计期末课程大作业:html橙色国外电影(13页)

大学生个人网页设计 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>
<html lang="en">
<head>
<title>News</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/faqstyle.css" type="text/css" media="all" />
<link href="css/single.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/contactstyle.css" type="text/css" media="all" />
<!-- news-css -->
<link rel="stylesheet" href="news-css/news.css" type="text/css" media="all" />
<!-- //news-css -->
<!-- list-css -->
<link rel="stylesheet" href="list-css/list.css" type="text/css" media="all" />
<!-- //list-css -->
<!-- font-awesome icons -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- //font-awesome icons -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<!---<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'>--->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
</head>
	
<body>
<!-- header -->
	<div class="header">
		<div class="container">
			<div class="w3layouts_logo">
				<a href="index.html"><h1>One<span>Movies</span></h1></a>
			</div>
			<div class="w3_search">
				<form action="#" method="post">
					<input type="text" name="Search" placeholder="Search" required="">
					<input type="submit" value="Go">
				</form>
			</div>
			<div class="w3l_sign_in_register">
				<ul>
					<li><i class="fa fa-phone" aria-hidden="true"></i> (+000) 123 345 653</li>
					<li><a href="#" data-toggle="modal" data-target="#myModal">Login</a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //header -->
<!-- bootstrap-pop-up -->
	<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					Sign In & Sign Up
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
				</div>
				<section>
					<div class="modal-body">
						<div class="w3_login_module">
							<div class="module form-module">
							  <div class="toggle"><i class="fa fa-times fa-pencil"></i>
								<div class="tooltip">Click Me</div>
							  </div>
							  <div class="form">
								<h3>Login to your account</h3>
								<form action="#" method="post">
								  <input type="text" name="Username" placeholder="Username" required="">
								  <input type="password" name="Password" placeholder="Password" required="">
								  <input type="submit" value="Login">
								</form>
							  </div>
							  <div class="form">
								<h3>Create an account</h3>
								<form action="#" method="post">
								  <input type="text" name="Username" placeholder="Username" required="">
								  <input type="password" name="Password" placeholder="Password" required="">
								  <input type="email" name="Email" placeholder="Email Address" required="">
								  <input type="text" name="Phone" placeholder="Phone Number" required="">
								  <input type="submit" value="Register">
								</form>
							  </div>
							  <div class="cta"><a href="#">Forgot your password?</a></div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
	</div>
	<script>
$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).toggleClass('open');       
        }
    );
});
</script>
<!-- //Bootstrap Core JavaScript -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
<!-- //here ends scrolling icon -->
</body>
</html>

🏠 CSS样式代码

代码如下（示例）：

/* 
 * 	Core Owl Carousel CSS File
 *	v1.3.3
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
/* display none until init */
.owl-carousel{
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
	background: #fff;
}
.owl-carousel .owl-wrapper{
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
	overflow: hidden;
	position: relative;
	width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}
	
.owl-carousel .owl-item{
	float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
	cursor: pointer;
}
.owl-controls {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

四、📁 目录结构

.
├── B036
│ ├── comedy.html
│ ├── contact.html
│ ├── css
│ │ ├── bootstrap.css
│ │ ├── contactstyle.css
│ │ ├── faqstyle.css
│ │ ├── flexslider.css
│ │ ├── font-awesome.min.css
│ │ ├── jquery.slidey.min.css
│ │ ├── medile.css
│ │ ├── news.css
│ │ ├── owl.carousel.css
│ │ ├── popuo-box.css
│ │ ├── single.css
│ │ └── style.css
│ ├── faq.html
│ ├── fonts
│ │ ├── FontAwesome.otf
│ │ ├── fontawesome-webfont.eot
│ │ ├── fontawesome-webfont.svg
│ │ ├── fontawesome-webfont.ttf
│ │ ├── fontawesome-webfont.woff
│ │ ├── fontawesome-webfont.woff2
│ │ ├── glyphicons-halflings-regular.eot
│ │ ├── glyphicons-halflings-regular.svg
│ │ ├── glyphicons-halflings-regular.ttf
│ │ ├── glyphicons-halflings-regular.woff
│ │ └── glyphicons-halflings-regular.woff2
│ ├── genres.html
│ ├── horror.html
│ ├── icons.html
│ ├── images
│ │ ├── 1.jpg
│ │ ├── 2.jpg
│ │ ├── 3.jpg
│ │ ├── 4.jpg
│ │ ├── 5.jpg
│ │ ├── 6.jpg
│ │ ├── 7.jpg
│ │ ├── arrow.png
│ │ ├── arrow1.png
│ │ ├── c1.jpg
│ │ ├── c10.jpg
│ │ ├── c11.jpg
│ │ ├── c12.jpg
│ │ ├── c2.jpg
│ │ ├── c3.jpg
│ │ ├── c4.jpg
│ │ ├── c5.jpg
│ │ ├── c6.jpg
│ │ ├── c7.jpg
│ │ ├── c8.jpg
│ │ ├── c9.jpg
│ │ ├── h1-1.jpg
│ │ ├── h1.jpg
│ │ ├── h10.jpg
│ │ ├── h11.jpg
│ │ ├── h12.jpg
│ │ ├── h2-1.jpg
│ │ ├── h2.jpg
│ │ ├── h3-1.jpg
│ │ ├── h3.jpg
│ │ ├── h4.jpg
│ │ ├── h5.jpg
│ │ ├── h6.jpg
│ │ ├── h7.jpg
│ │ ├── h8.jpg
│ │ ├── h9.jpg
│ │ ├── img-sp.png
│ │ ├── m1.jpg
│ │ ├── m10.jpg
│ │ ├── m11.jpg
│ │ ├── m12.jpg
│ │ ├── m13.jpg
│ │ ├── m14.jpg
│ │ ├── m15.jpg
│ │ ├── m16.jpg
│ │ ├── m17.jpg
│ │ ├── m18.jpg
│ │ ├── m19.jpg
│ │ ├── m2.jpg
│ │ ├── m20.jpg
│ │ ├── m21.jpg
│ │ ├── m22.jpg
│ │ ├── m23.jpg
│ │ ├── m3.jpg
│ │ ├── m4.jpg
│ │ ├── m5.jpg
│ │ ├── m6.jpg
│ │ ├── m7.jpg
│ │ ├── m8.jpg
│ │ ├── m9.jpg
│ │ ├── n1.jpg
│ │ ├── n10.jpg
│ │ ├── n11.jpg
│ │ ├── n2.jpg
│ │ ├── n3.jpg
│ │ ├── n4.jpg
│ │ ├── n5.jpg
│ │ ├── n6.jpg
│ │ ├── n7.jpg
│ │ ├── n8.jpg
│ │ ├── n9.jpg
│ │ ├── new.gif
│ │ ├── new.png
│ │ ├── news1.jpg
│ │ ├── play-button.png
│ │ └── user.jpg
│ ├── index.html
│ ├── js
│ │ ├── bootstrap.min.js
│ │ ├── easing.js
│ │ ├── jquery-2.1.4.min.js
│ │ ├── jquery.dotdotdot.min.js
│ │ ├── jquery.flexslider.js
│ │ ├── jquery.magnific-popup.js
│ │ ├── jquery.slidey.js
│ │ ├── move-top.js
│ │ ├── owl.carousel.js
│ │ └── simplePlayer.js
│ ├── list-css
│ │ ├── basictable.css
│ │ ├── list.css
│ │ └── table-style.css
│ ├── list-js
│ │ ├── jquery.basictable.min.js
│ │ ├── jquery.mobile.custom.min.js
│ │ └── jquery.tools.min.js
│ ├── list.html
│ ├── news-css
│ │ └── news.css
│ ├── news-single.html
│ ├── news.html
│ ├── series.html
│ ├── short-codes.html
│ └── single.html
├── 截图
│ ├── 1.jpg
│ ├── 10.jpg
│ ├── 11.jpg
│ ├── 12.jpg
│ ├── 13.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ ├── 5.jpg
│ ├── 6.jpg
│ ├── 7.jpg
│ ├── 8.jpg
│ └── 9.jpg
├── 使用须知.txt
├── 必看说明.txt
└── 目录结构.txt

五、💡 博主建议

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

六、🎁 更多作品

在这里插入图片描述
在这里插入图片描述

如果我的博客对你有所帮助，或者你喜欢我的内容，请别忘了“👍点赞”、“✍️评论”和“❤️收藏”，支持我一下哦！

关注我获取更多源码，这里有丰富的前端插件、炫酷的3D效果、图片展示、文字效果，以及整站模板、大学生毕业HTML模板、期末大作业模板等！在这里，许多前端开发者聚集在一起，共同探讨前端和Node知识，互相学习！

👇🏻👇🏻👇🏻对于上述技术相关的技术问题有不懂的，欢迎随时免费交流学习👇🏻👇🏻👇🏻
![请添加图片描述](https://i-blog.csdnimg.cn/direct/810b7bd809df4f7a9b1dd6e3e3c86967.jpeg)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值