云影院精选
更多>
期末大作业+毕业设计：在线电影网站设计——影视大全(6页面)含登录注册HTML+CSS+JavaScript
1.网页作品简介方面 ：HTML期末大作业也可以用做影视类网站的毕业设计 ,主要有：登录、主页、影院、电影、电视剧、推荐 等总共 6 个页面
2.网页设计方面：此作品为影视网页设计题材，代码为简单学生水平 html+css+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件 HBuilder、Vscode 、Webstorm 等
3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局。
作品展示
1.首页
2、影院
3、电影
4、电视剧
5、推荐
6、登入注册页面
全部文档
部分代码展示
1.index（网站首页）
HTML代码
影视大全
TOP 100
推荐>
css代码
@font-face {
font-family: 'iconfont';
src: url('../font/iconfont.eot');
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font/iconfont.woff2') format('woff2'),
url('../font/iconfont.woff') format('woff'),
url('../font/iconfont.ttf') format('truetype'),
url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 公共样式开始 */
.contain{
width: 1230px;
/* margin-top: 60px; */
margin: 0 auto;
}
/* 公共样式结束 */
/* 横幅广告开始 */
.canner-wrap {
width: 1230px;
margin: 0 auto;
margin-top: 140px;
outline: 1px solid #f40;
}
.canner-wrap .canner-fl {
width: 260px;
height: 350px;
margin-right: 20px;
}
.canner-fl p {
height: 57px;
background: #ccc;
line-height: 57px;
text-align: center;
position: relative;
border-bottom: 2px dotted #ffb400;
}
.canner-fl p:hover {
background: #efefef;
}
.canner-fl p:nth-child(6){
border: none;
}
.canner-fl p .arrow-r {
padding-left: 125px;
}
.canner-fl p .more-info {
display: none;
position: absolute;
top: 0;
left: 260px;
width: 130px;
height: 210px;
background: #efefef;
z-index: 2;
text-align: left;
}
.canner-fl p:hover .more-info{
display: block;
}
.canner-fl p .more-info .msg{
display: block;
margin-left: 15px;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.canner-wrap .canner-fr {
width: 230px;
height: 350px;
outline: 1px solid #ccc;
}
.canner-fr .announce {
padding: 10px 6px;
}
.canner-fr .announce li {
list-style: inside;
margin:5px 0;
}
.canner-fr .announce .spec {
list-style: none;
}
.canner-fr .announce .spec a{
font-size: 18px;
color: red;
}
.canner-fr .announce a:hover {
color: red;
text-decoration: underline;
}
.canner-fr .funny {
width: 230px;
height: 192px;
}
.canner {
width: 700px;
height: 350px;
overflow: hidden;
position: relative;
}
.canner img {
position: absolute;
width: 700px;
height: 350px;
opacity: 0;
animation: simg 12s infinite;
}
@keyframes simg {
0%{opacity: 1}
2%{opacity: 1}
4%{opacity: 1}
20%{opacity: 1}
}
img:nth-child(0){animation-delay: 0s;}
img:nth-child(1){animation-delay: 3s;}
img:nth-child(2){animation-delay: 6s;}
img:nth-child(3){animation-delay: 9s;}
.canner .left-arr {
position: absolute;
left: 5px;
top: 150px;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
font-size: 30px;
line-height: 50px;
text-align: center;
background-color: rgba(0,0,0,.3);
z-index: 10;
cursor: pointer;
}
.canner .right-arr {
position: absolute;
right: 5px;
top: 150px;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
font-size: 30px;
line-height: 50px;
text-align: center;
background-color: rgba(0,0,0,.3);
z-index: 10;
cursor: pointer;
}
.canner .text-info {
position: absolute;
left: 5px;
bottom: 15px;
}
.canner .text-info a {
color: #fff;
}
.canner .choose-dot {
position: absolute;
right: 8px;
bottom: 15px;
}
.canner .choose-dot li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 5px;
border: 1px solidrgba(0,0,0,.05);
background: #fff;
cursor: pointer;
}
.canner .choose-dot li:hover {
background: chocolate;
}
/* 横幅广告介绍 */
/* 主区域的右边开始 */
#chief{
margin-top: 60px;
}
#chief .aside{
width: 360px;
height: 614px;
/* border: 1px solid red; */
}
#chief .aside .panel-title{
color: #ef4238;
font-size: 26px;
}
#chief .panel-content{
width: 100%;
margin-top: 23px;
}
#chief .panel-content .ranking-item-top{
margin-bottom: 11px;
}
#chief .panel-content .ranking-item-top .ranking-top-left{
width: 120px;
height: 78px;
float: left;
position: relative;
margin-right: 10px;
}
#chief .panel-content .ranking-item-top .ranking-top-left .ranking-top-icon{
width: 22px;
height: 25px;
position: absolute;
left: 0;
top: 0;
background-image: url("../img/ranking-top-icon.png");
background-size: contain;
}
#chief .panel-content .ranking-item-top .ranking-top-right{
height: 78px;
border: 1px solid #ccc;
}
#chief .panel-content .ranking-item-top .ranking-top-right:hover{
background-color: #ccc;
}
#chief .panel-content .ranking-item-top .ranking-top-right .movie-name{
color: #333;
font-size: 18px;
line-height: 1.4;
display: inline-block;
margin-top: 9px;
}
#chief .panel-content .ranking-item-top .ranking-top-right .movie-wish{
margin-top: 12px;
font-size: 14px;
color: #ef4238;
}
#chief .panel-content .ranking-item{
width: 360px;
height: 36.6px;
line-height: 36.6px;
}
#chief .panel-content .ranking-item:hover {
background: #f7f7f7;
}
#chief .panel-content .ranking-item .ranking-index{
color: #ef4238;
display: inline-block;
width: 20px;
}
#chief .panel-content .ranking-item .color-ccc {
color: #ccc;
}
#chief .panel-content .ranking-item .ranking-movie-name{
font-size: 16px;
color:#333;
vertical-align: top;
}
#chief .panel-content .ranking-item .stonefont{
float: right;
font-size: 14px;
color:#ef4238;
}
#chief .box-total-wrapper {
margin-top: 32px;
}
#chief .box-total-wrapper>h3{
width: 20px;
height: 83px;
padding: 10px;
color: #fff;
text-align: center;
line-height: 21px;
font-weight: 400;
font-size: 17px;
background-color: #ef4238;
float: left;
}
#chief .box-total-wrapper .bottom-left{
height: 102px;
width: 319px;
border: 1px solid #ccc;
border-left: none;
}
#chief .box-total-wrapper .bottom-left .num{
display: inline-block;
font-size: 22px;
font-weight: 700;
margin: 22px 130px 10px 22px;
color: #ef4238;
}
#chief .box-total-wrapper .bottom-left .more{
color: #ef4238;
}
#chief .box-total-wrapper .bottom-left .time{
margin: 0 10px 0 22px;
color: #999;
font-size: 14px;
}
#chief .box-total-wrapper .bottom-left .pull-right{
color: #999;
font-size: 14px;
}
/* 主区域的右边结束 */
/* 主区域的左边开始 */
.contain .main{
width: 801px;
height: 614px;
padding-right: 36px;
/* background: #ef4238; */
/* border: 1px solid red; */
}
.contain .main .panelhead{
width: 740px;
height: 26px;
font-size: 26px;
line-height: 26px;
color: #ef4238 !important;
}
.contain .main .panelhead .more{
float: right;
font-size: 14px;
line-height: 16px;
margin-top: 10px;
}
.contain .main .panelhead .more a {
color: #ef4238;
}
.contain .main .panel-content{
width: 100%;
margin-top: 23px;
}
.contain .main .panel-content .movies-list{
margin: -23px 0 20px -25px;
}
.contain .main .panel-content .movies-list .movie-item{
width: 161.1px;
/* height: 260.6px; */
border: 1px solid #efefef;
margin: 30px 0 0 30px;
display: inline-block;
vertical-align: top;
position: relative;
}
.contain .main .panel-content .movies-list .movie-item .movie-sale{
text-align: center;
height: 42px;
line-height: 39px;
color: #ef4238;
}
.contain .main .panel-content .movies-list .movie-item .movie-sale:hover {
color:#fff;
background-color:#ef4238;
}
.contain .main .panel-content .movies-list .movie-item .imax3d{
width: 69px;
height: 25px;
background: url("../img/3dmax.png");
background-size: contain;
position: absolute;
top: 4px;
left: -2px;
font-size: 12px;
color:#fff;
}
.contain .main .panel-content .movies-list .movie-item .integer{
position: absolute;
right: 12px;
bottom: 54px;
font-size: 18px;
color: #ffb400;
}
.contain .main .panel-content .movies-list .movie-item .integer span{
font-size: 14px;
}
.contain .main .panel-content .movies-list .movie-item .movietitle{
position: absolute;
left: 10px;
bottom: 54px;
color: #fff;
font-size: 16px;
line-height: 22px;
}
/* 主区域的左边结束 */
/* 第二个主区域的左边开始 */
.panelhead .textcolor-blue {
color: #2d98f3 !important;
}
.panelhead a:hover {
text-decoration: underline;
}
.panelhead .more a {
color: #2d98f3;
}
.contain .main .panelhead .special2{
font-size: 14px;
color: #333;
margin-left: 10px;
}
.contain .aside .text-yellow{
color: #ffb400 !important;
margin-right: 140px;
}
.contain .aside .see-com{
color: #ffb400 !important;
}
.contain .main .panel-content .movies-list .movie-item-spec{
width: 350px;
height: 220px;
}
/* .contain .main .panel-content .movies-list .movie-item {
margin: 50px 0 0 30px;
} */
.movie-item .integer2 {
position: absolute;
right: 10px;
bottom: 6px;
font-size: 18px;
color:#ffb400;
}
.movie-item .integer2 span {
font-size: 14px;
}
.movie-item .movietitle2 {
position: absolute;
left: 6px;
bottom: 6px;
color:#fff;
font-size: 16px;
line-height: 22px;
}
/* 第二个主区域的左边结束 */
/* 右侧导航开始 */
#tool{
width: 50px;
height: 303px;
border: 1px solid red;
position: fixed;
top: 300px;
right: 3%;
border-radius: 8px;
}
#tool .bnt{
text-align: center;
position: relative;
}
.bnt .doll {
position: absolute;
top: -21px;
left: 10px;
font-size: 20px;
color:#008c8c;
}
#tool .bnt a{
display: block;
width: 100%;
height: 50px;
/* line-height: 70px; */
text-align: center;
padding-top: 10px;
background: #fff;
border-bottom: 1px solid #ccc;
}
#tool .bnt .active{
border-radius: 8px 8px 0 0;
color: #fff;
background: #f40;
font-weight: bold;
}
#tool .bnt a:nth-child(6){
border-bottom: none;
border-radius: 0 0 8px 8px;
}
#tool .bnt a:hover{
color: #fff;
background: #f40;
font-weight: bold;
}
/* 右侧导航接受 */