菜单 搜索
首页 前端知识 制作一个简单HTML电影网页设计（HTML CSS）

制作一个简单HTML电影网页设计（HTML CSS）

2024-01-25 10:01:59 前端知识 前端哥 627 705 我要收藏

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

文章目录

  • 一、网页介绍
  • 一、网页效果
  • 二、代码展示
    • 1.HTML代码
    • 2.CSS代码
  • 三、个人总结
  • 四、心得体会
  • 五、精彩推荐

一、网页介绍

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>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>电影网站</title>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/icofont.css" />
		<link rel="stylesheet" href="css/mian_style.css" />
		<script src='./js/jquery.js'></script>
	</head>
	<body>
		<!--头部开始	-->
		<header class="header">
			<div class="container">
				<div class="header_area">
					<div class="logo">
						<a href="index.html">
							<img src="picture/logo.png" alt="logo"/>
						</a>
					</div>	
					<div class="meau">
						<ul>
							<li>
								<a class="active" href="index.html">首页</a>
							</li>
							<li>
								<a href="movies.html">电影</a>
							</li>
							<li>
								<a href="celebrities.html">明星</a>
							</li>
							<li>
								<a href="hot.html">热点</a>
							</li>
							<li>
								<a href="news.html">新闻</a>
							</li>
							<li style="width: 120px;">
								<a href="###" class="theme-btn">
									<i class="icofont icofont-ticket"></i>
									&nbsp;&nbsp;订票									
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--头部结束-->			
		</header>
		<!--内容部分开始-->
			<section id="content">
				<!--banner开始-->
				<div class="banner">
					<ul class="list">
						<li class="on"><a href="#"><img src="picture/b1.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b2.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b3.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b4.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b5.jpg" alt="" /></a></li>
					</ul>
					<ul class="btn">
						<li class="on">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
					</ul>
					
					<a href="javascript:;" class="arrow left">&lt</a>
					<a href="javascript:;" class="arrow right">&gt</a>
				</div>
				<!--近期热播-->
				<div class="con_area">
					<div class="container">
						<div class="recent_con">
							<div class="con_top">
								<h1>
									<i class="icofont icofont-movie" ></i>
									近期热播
								</h1>
								<a href="index.html" class="more">
									MORE>>
								</a>
							</div>
							<div class="con_main">
								<ul style="overflow:hidden;margin-bottom: 20px;">
									<li class="img_right">
										<img src="picture/portfolio1.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<div class="portfolio-content">
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</div>
									</li>
									
									<li  class="img_right">
										<img src="picture/portfolio2.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li  class="img_right">
										<img src="picture/portfolio2.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li>
										<img src="picture/portfolio4.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>																		
								</ul>
								<ul>
									<li class="img_right">
										<img src="picture/portfolio5.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li  class="img_right">
										<img src="picture/portfolio6.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li  class="img_right">
										<img src="picture/portfolio2.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li>
										<img src="picture/portfolio4.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>																		
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!--经典电影-->
				<div class="con_area">
					<div class="container">
						<div class="jd_con">
							<div class="con_top">
								<h1>
									<i class="icofont icofont-film" ></i>
									经典电影
								</h1>
								<a href="index.html" class="more">
									MORE>>
								</a>
							</div>
				<div class="row" style="overflow: hidden; width: 100%;">
                    <div class="col-md-9">
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
                    </div>
				</div>
						</div>
					</div>
				</div>
			<!--	最新电影-->
				<div class="con_area">
					<div class="container">
						<div class="jd_con">
							<div class="con_top">
								<h1>
									<i class="icofont icofont-coffee-cup" ></i>
									最新电影
								</h1>
								<a href="index.html" class="more">
									MORE>>
								</a>
							</div>
			</div>
			<div class="news-slide-area">
				<div class="news-slider">
					<div class="single-news">
						<div class="news-bg-1"></div>
						<div class="news-date">
							<h2><span>NOV</span> 25</h2>
							<h1>2017</h1>
						</div>
						<div class="news-content">
							<h2>The Witch Queen</h2>
							<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
						</div>
						<a href="#">Read More</a>
					</div>
					<div class="single-news">
						<div class="news-bg-2"></div>
						<div class="news-date">
							<h2><span>NOV</span> 25</h2>
							<h1>2017</h1>
						</div>
						<div class="news-content">
							<h2>The Witch Queen</h2>
							<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
						</div>
						<a href="#">Read More</a>
					</div>
					<div class="single-news">
						<div class="news-bg-3"></div>
						<div class="news-date">
							<h2><span>NOV</span> 25</h2>
							<h1>2017</h1>
						</div>
						<div class="news-content">
							<h2>The Witch Queen</h2>
							<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
						</div>
						<a href="#">Read More</a>
					</div>
				</div>
			</div>
					</div>
				</div>
			
			</section>
			<!--end start-->
		<footer id="end">
			<div class="container">
				<span class="company">
					北京时代国际影业有限公司
				</span>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src="js/main.js"></script>
</html>
 
 
 
复制

2.CSS代码

 
body{
	line-height: 24px;
	font-size: 14px;
	color: #b6b7b9;
	background: #13151f;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	position: relative;
/*	height: 5000px;*/
}
.header{
	padding: 18px 0;
	width: 100%;
	border-bottom: 1px solid #252838;
	z-index: 99;
}
.header_area{
	overflow: hidden;
}
.container{
	max-width: 1140px;
	margin: 0 auto;
}
.logo{
	float: left;
}
.logo a{
	display: inline-block;
}
.meau{
	float: right;
	padding-top: 34px;
}
.meau li{
	float: left;
	width: 90px;
	text-align: center;
}
.meau li a{
	font-family: "微软雅黑";
	font-size: 14px;
	color: #ffffff;
	text-decoration: none;
}
.meau li a:hover{
	color: #eb315a;
}
.meau li .active{
	color: #eb315a;
}
.meau li .theme-btn{
	background: #eb315a;
	border: 1px solid #eb315a;
	color: #fff;
	border-radius: 35px;
	padding: 5px 25px;
	display: inline-block;
	font-size: 15px;
	cursor: pointer;
	font-weight: 500;
}
.meau li .theme-btn:hover{
	color: #eb315a;
	border: 1px solid #eb315a;
	background: rgba(235,49,90,0.2);
}
/*banner*/
.banner{
			width: 100%;
			height: 450px;
			margin: 0px auto;
			overflow: hidden;
			position: relative;
}
		
		.list li{
			position: absolute;
			width: 100%;
			text-align: center;
		}
		
		.btn{
			font:14px/2.5em "微软雅黑";
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translateX(-55%);	
			bottom:40px;	
			z-index: 2;	
		}
		.btn li{
			float: left;
			width: 30px;
			line-height: 30px;
			border-radius: 50%;
			background: salmon;
			margin: 0 5px;
			color: #fff;
			cursor: pointer;
		}
		.btn .on{
			background: slateblue;
		}
		.list .on{
			z-index: 1;
		}
		
		.arrow{
			position: absolute;
			top: 50%;
			transform: translateY(-40%);
			width: 30px;
			text-align: center;
			line-height: 60px;
			background: rgba(0,0,0,0.3);
			color: #fff;
			text-decoration: none;
			font-size: 20px;
			z-index: 2;
		}
		.right{
			right: 14%;
		}
		.left{
			left:14%;
		}
		.arrow:hover{
			background: rgba(0,0,0,0.5);
			font-weight: bold;
			text-decoration: none;
		}
/*近期热播*/
.con_area{
	padding-top: 30px;
}
.recent_con{
	overflow: hidden;
}
.con_top{
	height: 54px;
	padding:8px 0;
	border-bottom: 1px solid #ffffff;
}
.con_top h1{
	float: left;
}
.con_top h1 i{
	color: #fece50;
	font-size: 40px;
	margin-right: 5px;
}
h1{
	font-size: 36px;
	color: #ffffff;
}
.more{
	float: right;
	line-height: 74px;
	color: #eb315a;
}
.con_main{
	margin-top: 50px;
}
.con_main li{
	float: left;
	display: block;
	position: relative;
	cursor: pointer;
	width: 255px;
}
.con_main li:hover img{
	width: 102%;
	height: 102%;
}
.con_main li img{
	transition: 0.9s
}
.con_main .img_right{
	margin-right: 2.2%;
}
.con_main li a{
	display: block;
	position: absolute;	
	top: 42%;
	margin-top: -30px;
	margin: auto;
	left: 50%;
	margin-left: -30px;
}
.con_main li i{
	width: 60px;
 
	height: 60px;
	
	line-height: 60px;
	
	color: #fff;
	
	border: 2px solid #fff;
	
	border-radius: 50%;
	
	text-align: center;
	
	font-size: 18px;
	
	display: inline-block;	
	transition: all 0.4s;	
	
}
.con_main li i:hover{
	color: orange;
	border-color: orange;
}
/*底部*/
#end{
	margin-top: 30px;
	background:#202334;
}
.company{
	width: 100%;
	display: inline-block;
	padding: 20px 0px;
	text-align: center;
}
/*详情页标题*/
.breadcrumb-area-content h2{
	margin-top: 30px;
}
 
 
复制

三、个人总结

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

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

四、心得体会

许多开发人员认为揽长设计是一种天生的能力，而创造力是与生俱来的。但是设计是一项可以像其他任何东西一样学习的技能。你不必天生就可以创建一个漂亮的网站的艺术家，这需要实践，熟不知局限太大，自己想要的内容板式也要跟着思路走，越往后看着自己的站点越不顺眼，没有一点成就感。

①在人群中脱颖而出。许多开发都喜欢搬运其它站点页面，很容易看出它不是自己设计的。如果个人网站的目的是展示你的能力，那么使用模板可能会降低别人对你的肯定，自己设计的独特风格，让你站点在众多的站点中脱颍而出。

②练习技巧。设计它会帮助你练习设计原则，工具，HTML和CSS。你将更容易开发用户界面并将其引入网络。设计出独特且符合现代潮流的个人站点。

以前接私活的时侯，不会设计页面，搬运其它站点页面，导致自己修改图片和部分页面的时候，不会使用工具，设计出来的页面死板不灵活，客户不满意，自己看了也觉得很普通，没有给你心意的感觉。

③更好的应用程序性能。你的网站将是轻量级的，并且使用自定义CSS会具有更好的性能。如果要包括U库或模板，则它可能包含大量代码，以涵盖您未使用的各种可能的自定义。如果未使用的代码发送给用户，则会对你网站的性能产生负面影响。加载慢，打开网页慢，被很多人不接受。

④发展职业技能。在Wb开发角色中，你可能不必从头开始实现完整的网站设计，但是你应该能够制作与现代设计一致的外观精美的界面。成为“全栈开发人员”通常意味着精通后端语言或前端JavaScript框架，同时能够熟悉设计，产品方面的知识。全栈开发人员应具有些基本的设计知识，并能够为用户提供一致的体验。当然从中学习到很多的技能知识，这是毋雨置疑的。

⑤可能会很有趣。创造出令自己感到骄做的东西是一种有趣的经历。如果您花一些时间练习它，琢磨它，打迄础厢自君胸乘学矫录更好，生活中发现美是一件很美好的事，但我觉得创造美更让人觉得骄傲。

五、精彩推荐

看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/281.html
标签
jsdreamweaverhtml网页作业web课程设计与制作web期末大作业
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C/C | 每日一练 (2)

2025-02-24 13:02:49

Linux性能监控工具汇总

2025-02-24 13:02:48

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码 数据库 文档)

2025-02-24 13:02:48

DeepSeek 提示词：定义、作用、分类与设计原则

2025-02-24 13:02:48

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

2025-02-24 13:02:48

Python常见面试题的详解16

2025-02-24 13:02:48

Docker实战-使用docker compose搭建博客

2025-02-24 13:02:47

QQ登录测试用例报告

2025-02-24 13:02:47

乐享数科：供应链金融—三个不同阶段的融资模式

2025-02-24 13:02:47

【Deepseek】Linux 本地部署 Deepseek

2025-02-24 13:02:47

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
3

CSS常用属性（文本属性）

2024-11-04 09:11:111000
4

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
5

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
6

vue使用datav echarts

2024-09-06 00:09:381000
7

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
8

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
9

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
10

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！