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

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

2024-01-25 10:01:59 前端知识 前端哥 587 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
标签
jsdreamweaver
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

js向上取整

2024-02-03 16:02:53

9、jQuery

2024-02-03 12:02:49

web前端1 x（初级）理论（158道单选题含答案）

2024-02-03 12:02:49

网站登录界面制作（three.js 3D特效背景） boostrap导航栏实现 jQuery移动窗口【附加源代码】

2024-02-03 12:02:45

基于javaweb mysql的ssm maven红酒朔源管理系统(java ssm jsp layui jquery mysql)

2024-02-03 12:02:39

VUE倒计时组件，解决setInterval （）引起页面卡顿问题

2024-02-03 12:02:38

jquery导航图片全屏滚动、首页全屏轮播图，各式相册

2024-02-03 12:02:31

基于Bootstrap&HTML&CSS&jQuery制作左侧多级垂直导航菜单(含源码)

2024-02-03 12:02:29

onlyoffice 相关参数设置说明

2024-02-03 12:02:29

jQuery 遍历方法总结

2024-02-03 12:02:26

大家推荐的文章
1

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
2

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
3

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
4

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
5

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994
6

Access-Control-Allow-Origin跨域解决及详细介绍

2024-02-03 12:02:13993
7

Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993
8

vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992
9

jQuery实现AJAX和AJAX跨域问题

2024-01-28 12:01:54988
10

echarts - 自定义形状 - 实现立体柱状图

2024-01-30 10:01:46987

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

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

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

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

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