一、网页介绍
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
二、网页截图
三、网页代码
<!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>
订票
</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"><</a>
<a href="javascript:;" class="arrow right">></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>
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、根据2013年1月30日《计算机软件保护条例》2次修订第17条规定：
为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，
可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！
3、本站资源仅供学习和研究，大家请在下载后24小时内删除， 请勿进行商业交易、运营等行为；
4、本站所有源码都来源于网络收集修改或者交换!如果侵犯了您的权益,请及时告知我们,我们即刻处理！
2、根据2013年1月30日《计算机软件保护条例》2次修订第17条规定：
为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，
可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！
3、本站资源仅供学习和研究，大家请在下载后24小时内删除， 请勿进行商业交易、运营等行为；
4、本站所有源码都来源于网络收集修改或者交换!如果侵犯了您的权益,请及时告知我们,我们即刻处理！
