HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猫眼电影 - 一网打尽好电影</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/shouye.css">
</head>
<body>
<div class="dhl-gd">
<!-- 导航栏 -->
<header>
<nav>
<ul class="dhl">
<li>
<a href="#">
<img src="../img/maoyan.small.png" alt="">
</a>
</li>
<li>
<select name="chengshi" id="" class="dm">
<option value="cd">成都</option>
<option value="cq">重庆</option>
<option value="cs">长沙</option>
<option value="cc">长春</option>
<option value="cz">崇州</option>
</select>
</li>
<li>
<a href="shouye.html">首页</a>
</li>
<li>
<a href="dianying.html">电影</a>
</li>
<li>
<a href="bangdan.html">榜单</a>
</li>
<li>
<a href="#">热点</a>
</li>
</ul>
</nav>
<!-- 右边的导航栏 -->
<nav class="dhl2">
<ul>
<li>
<form action="#" >
<input type="text" placeholder="找影视、影人、影院">
</form>
<button>
<a href="#">
<img src="../img/03.png" alt="">
</a>
</button>
</li>
<li>
<a href="denglu.html">
<img src="../img/04.png" alt="">
</a>
<select name="chengshi" id="tp" class="sj">
</select>
</li>
</ul>
</nav>
</header>
</div>
<!-- 北背景图片 和电影图片-->
<div class="bj"></div>
<div class="demo">
<div class="bj-t">
<a href="#">
<img src="../img/shouye8.png" alt="">
</a>
<a href="zixun.html">
<img src="../img/shouye1.png" alt="">
</a>
<a href="#">
<img src="../img/shouye2.png" alt="">
</a>
<a href="#">
<img src="../img/shouye3.png" alt="">
</a>
<a href="#">
<img src="../img/shouye4.png" alt="">
</a>
<a href="#">
<img src="../img/shouye5.png" alt="">
</a>
<a href="#">
<img src="../img/shouye6.png" alt="">
</a>
<a href="#">
<img src="../img/shouye7.png" alt="">
</a>
</div>
</div>
<!--整个内容宽度 -->
<div class="box">
<div class="box-l">
<div class="zzry">
<!-- 正在热映 -->
<span>正在热映（55部）</span>
<a href="#">全部></a>
</div>
<!-- 正在热映图片 -->
<div class="zzry-img">
<ul>
<li>
<a href="#">
<img src="../img/hot01.png" alt=""></a>
<p><a href="#">购票</a></p>
</li>
<li>
<a href="#">
<img src="../img/hot_02.png" alt=""></a>
<p><a href="#">购票</a></p>
</li>
<li>
<a href="#">
<img src="../img/hot_03.png" alt=""></a>
<p><a href="#">购票</a></p>
</li>
<li>
<a href="xiangqing.html" target="_blank">
<img src="../img/hot_04.png" alt=""></a>
<p><a href="xiangqing.html">购票</a></p>
</li>
<li>
<a href="#">
<img src="../img/hot_05.png" alt=""></a>
<p><a href="#">购票</a></p>
</li>
<li>
<a href="#">
<img src="../img/hot_06.png" alt=""></a>
<p><a href="#">购票</a></p>
</li>
<li>
<a href="#">
<img src="../img/hot_77.png" alt=""></a>
<p><a href="#">购票</a></p>
</li>
<li>
<a href="#">
<img src="../img/hot_08.png" alt=""></a>
<p><a href="#">购票</a></p>
</li>
</ul>
</div>
<!-- 即将上映 -->
<div class="jjsy">
<p>
即将上映（276部）
<span>
<a href="#">全部></a>
</span>
</p>
<ul>
<li>
<img src="../img/comingSoon_01.png" alt="">
<div class="xiangkan">
<p>134人想看</p>
<div class="yugao">
<a href="#">预告片</a>
<a class="yushou" href="#">预售</a>
</div>
</div>
<div class="sysj">
<p>10月26日上映</p>
</div>
</li>
<li>
<img src="../img/comingSoon_02.png" alt="">
<div class="xiangkan">
<div class="xiangkan">
<p>43487人想看</p>
<div class="yugao">
<a href="#">预告片</a>
<a class="yushou" href="#">预售</a>
</div>
</div>
<div class="sysj">
<p>10月28日上映</p>
</div>
</li>
<li>
<img src="../img/comingSoon_03.png" alt="">
<div class="xiangkan">
<p>22469人想看</p>
<div class="yugao">
<a href="#">预告片</a>
<a class="yushou" " href="#">预售</a>
</div>
</div>
<div class="sysj">
<p>10月28日上映</p>
</div>
</li>
<li>
<img src="../img/comingSoon_04.png" alt="">
<div class="xiangkan">
<p>17606人想看</p>
<div class="yugao">
<a href="#">预告片</a>
<a class="yushou" href="#">预售</a>
</div>
</div>
<div class="sysj">
<p>10月28日上映</p>
</div>
</li>
<li>
<img src="../img/comingSoon_05.png" alt="">
<div class="xiangkan">
<p>8970人想看</p>
<div class="yugao">
<a href="#">预告片</a>
<a class="yushou" href="#">预售</a>
</div>
</div>
<div class="sysj">
<p>10月28日上映</p>
</div>
</li>
<li>
<img src="../img/comingSoon_06.png" alt="">
<div class="xiangkan">
<p>6025人想看</p>
<div class="yugao">
<a href="#">预告片</a>
<a class="yushou" href="#">预售</a>
</div>
</div>
<div class="sysj">
<p>10月28日上映</p>
</div>
</li>
<li>
<img src="../img/comingSoon_07.png" alt="">
<div class="xiangkan">
<p>2975人想看</p>
<div class="yugao">
<a href="#">预告片</a>
<a class="yushou" href="#">预售</a>
</div>
</div>
<div class="sysj">
<p>10月28日上映</p>
</div>
</li>
<li>
<img src="../img/comingSoon_08.png" alt="">
<div class="xiangkan">
<p>2975人想看</p>
<div class="yugao">
<a href="#">预告片</a>
<a class="yushou" href="#">预售</a>
</div>
</div>
<div class="sysj">
<p>10月28日上映</p>
</div>
</li>
</ul>
</div>
<!-- 热播电影 -->
<div class="rebo">
<div class="rebo1">
<span>热播电影</span>
<a href="#">爱情</a>
<a href="#">喜剧</a>
<a href="#">工作</a>
<a href="#">恐怖</a>
<a href="#">动画</a>
</div>
<div class="rebo2">
<span>
<a href="#">全部></a>
</span>
</div>
</div>
<ul class="rb-img">
<li>
<a href="#">
<img src="../img/shouye14.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../img/hotPlay_02.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../img/hotPlay_03.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../img/hotPlay_04.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../img/hotPlay_05.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../img/hotPlay_06.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../img/xunlongjue.png" alt="">
</a>
</li>
</ul>
</div>
<!-- 右边部分 -->
<div class="box-r">
<p>今日票房</p>
<ul class="piaofang">
<li>
<a href="#">
<img src="../img/shouye9.png" alt="">
<div>
<p>机械师：复活</p>
<p>5203.28万</p>
</div>
</a>
</li>
<li>
<a href="#">
<i class="ph">2</i>
<span>惊天破</span>
<span class="pfs">2023.35万</span>
</a>
</li>
<li>
<a href="xiangqing.html" target="_blank">
<i class="ph">3</i>
<sapn>湄公河行动</sapn>
<sapn class="pfs">1198.19万</sapn>
</a>
</li>
<li>
<a href="#">
<i>4</i>
<span>侠探杰克：永不回头</span>
<span class="pfs">1063.12万</span>
</a>
</li>
<li>
<a href="#">
<i>5</i>
<span>龙珠Z：复活的弗利萨</span>
<span class="pfs">222.08万</span>
</a>
</li>
<li>
<a href="#">
<i>6</i>
<span>从你的全世界路过</span>
<span class="pfs">212.04万</span>
</a>
</li>
<li>
<a href="#">
<i>7</i>
<span>圆梦巨人</span>
<span class="pfs">175.00万</span>
</a>
</li>
<li>
<a href="#">
<i>8</i>
<span>凶手还未睡</span>
<span class="pfs">46.23万</span>
</a>
</li>
<li>
<a href="#">
<i>9</i>
<span>勇士</span>
<span class="pfs">25.99万</span>
</a>
</li>
<li>
<a href="#">
<i>10</i>
<span>遵义会议</span>
<span class="pfs">18.00万</span>
</a>
</li>
</ul>
<!-- 今日头条 -->
<div class="jrtt">
<div class="jrtt2">
<p>今日大盘</p>
</div>
<div class="jrtt3">
<span>1.03</span><span>亿</span>
<span>
<a href="#">查看更多></a>
</span>
<p>
<span>
北京时间22:46:26
</span>
<span>猫眼专业版实时票房数据</span>
</p>
</div>
</div>
<!-- 最受期待的 -->
<div class="zsqd">
<div class="zsqd2">
<span>最受期待</span>
<span>
<a href="#">查看完整榜单></a>
</span>
</div>
<ul>
<li>
<a href="#">
<img src="../img/shouye10.png" alt="">
<div>
<p>三生三世十里桃花</p>
<p>上映时间：2016</p>
<p>212184人想看</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="../img/shouye11.png" alt="">
<p class="qybs">奇异博士</p>
<p class="xk">152788人想看</p>
</a>
</li>
<li>
<a href="#">
<img src="../img/shouye12.png" alt="">
<p class="qybs">敢问路在何方</p>
<p class="xk">169921人想看</p>
</a>
</li>
<li>
<a href="#">
<i>4</i>
<span>你的名字</span>
<span >53713人想看</span>
</a>
</li>
<li>
<a href="#">
<i>5</i>
<span>我不是潘金莲</span>
<span >104557人想看</span>
</a>
</li>
<li>
<a href="#">
<i>6</i>
<span>长城</span>
<span>110883人想看</span>
</a>
</li>
<li>
<a href="#">
<i>7</i>
<span>大闹天竺</span>
<span>70962人想看</span>
</a>
</li>
<li>
<a href="#">
<i>8</i>
<span>最萌身高差</span>
<span>36719人想看</span>
</a>
</li>
<li>
<a href="#">
<i>9</i>
<span>但丁密码</span>
<span>43487人想看</span>
</a>
</li>
<li>
<a href="#">
<i>10</i>
<span>28岁未成年</span>
<span>69047人想看</span>
</a>
</li>
</ul>
</div>
<!-- TOP100 -->
<div class="top">
<div>
<span>TOP 100</span>
<span>
<a href="#">查看完整榜单></a>
</span>
</div>
<ul class="piaofang">
<li>
<a href="#">
<img src="../img/shouye13.png" alt="">
<div>
<p>霸王别姬</p>
<p>9.6分</p>
</div>
</a>
</li>
<li>
<a href="#">
<i class="ph2">2</i>
<span>肖申克的救赎</span>
<span class="pfs2">9.5分</span>
</a>
</li>
<li>
<a href="#">
<i class="ph2">3</i>
<sapn>这个杀手不太冷</sapn>
<sapn class="pfs2">9.5分</sapn>
</a>
</li>
<li>
<a href="#">
<i>4</i>
<span>罗马假日</span>
<span class="pfs2">9.1分</span>
</a>
</li>
<li>
<a href="#">
<i>5</i>
<span>阿甘正传</span>
<span class="pfs2">9.4分</span>
</a>
</li>
<li>
<a href="#">
<i>6</i>
<span>泰坦尼克号</span>
<span class="pfs2">9.5分</span>
</a>
</li>
<li>
<a href="#">
<i>7</i>
<span>龙猫</span>
<span class="pfs2">9.2分</span>
</a>
</li>
<li>
<a href="#">
<i>8</i>
<span>教父</span>
<span class="pfs2">9.3分</span>
</a>
</li>
<li>
<a href="#">
<i>9</i>
<span>唐伯虎点秋香</span>
<span class="pfs2">9.2分</span>
</a>
</li>
<li>
<a href="#">
<i>10</i>
<span>千与千寻</span>
<span class="pfs2">9.3分</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 脚注 -->
<footer>
<div>
<p>©2016 猫眼电影 maoyan.com 京ICP证160733号 京ICE 备16022489号-1 京公网安备 11010502030881号 网络文化经营许可证 电子公告服务规则</p>
<p>北京猫眼文化传媒有限公司</p>
</div>
</footer>
<!--右侧的猫 -->
<div class="mao">
<a href="#">
<img src="../img/shouye15.png" alt="">
</a>
</div>
</body>
</html>
CSS代码
a{
text-decoration: none;
color: black;
}
.dm{
outline: none;
border: 0px;
width: 50px;
font-size: 14px;
}
a:hover{
background-color: #c1c1c1;
}
/*导航栏*/
.dhl-gd{
width: 100%;
height: 80px;
background-color: #fff;
position: fixed;
top: 0;
z-index: 4;
}
header{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.dhl{
overflow: hidden;
}
header>nav:first-child{
float: left;
}
header>nav:last-child{
float: right;
}
header>nav>ul>li{
margin: 20px 20px 20px 0px;
box-sizing: border-box;
float: left;
outline: none;
}
header>nav>ul>li>a{
font-size: 14px;
}
.dhl>li:not(:first-child){
margin-top: 30px;
}
.dhl>li:nth-child(3)>a,
.dhl>li:nth-child(4)>a,
.dhl>li:nth-child(5)>a,
.dhl>li:nth-child(6)>a{
padding: 30px 20px;
}
.dhl>li:nth-child(3):hover>a,
.dhl>li:nth-child(4):hover>a,
.dhl>li:nth-child(5):hover>a,
.dhl>li:nth-child(6):hover>a{
background-color: red;
}
.dhl2>ul>li>form>input{
width: 210px;
height: 36px;
border-radius: 20px;
border: 1px solid #c1c1c1;
outline: none;
padding-left: 10px;
padding-right: 40px;
}
.dhl2>ul>li:nth-child(1){
position: relative;
}
.dhl2>ul>li:nth-child(1)>button>a>img{
position: absolute;
top: 0px;
left: 226px;
}
.sj{
width: 15px;
border: 0px;
}
/*背景图片*/
.bj{
margin-top:80px;
height: 440px;
background: url(../img/4f1a3c216bbb54c2d5f7523e04e0a369192713.jpg) center;
position: relative;
}
.demo{
width: 1200px;
margin:0 auto;
}
.bj-t{
width: 1110px;
margin-top: -56px;
position: relative;
z-index: 2px;
background-color: #fff;
padding: 2px 0;
text-align: center;
}
.bj-t>a:first-child{
margin-right: 10px;
}
.bj-t>a:last-child{
margin-left: 10px;
}
.bj-t>a>img{
border: 2px solid #fff;
}
.bj-t>a:nth-child(2):hover img,
.bj-t>a:nth-child(3):hover img,
.bj-t>a:nth-child(4):hover img,
.bj-t>a:nth-child(5):hover img,
.bj-t>a:nth-child(6):hover img,
.bj-t>a:nth-child(7):hover img{
border: 2px solid red;
}
/*整个内容宽度*/
.box{
width: 1200px;
margin: 0 auto;
margin-top:80px;
display: flex;
justify-content: space-around;
}
.box-l{
width: 760px;
}
/*正在热映*/
.zzry{
width: 760px;
margin:0 auto;
display: flex;
justify-content: space-between;
}
.zzry>span{
font-size: 26px;
color: red;
}
.zzry>a{
font-size: 16px;
color: red;
}
/*热映图片*/
.zzry-img{
width: 760px;
}
.zzry-img>ul{
flex-wrap: wrap;
display: flex;
justify-content: space-between;
}
.zzry-img>ul>li{
margin-top:20px;
border:1px solid #c1c1c1;
}
.zzry-img>ul>li>p{
width: 160px;
height: 40px;
text-align: center;
line-height: 40px;
}
.zzry-img>ul>li>p>a{
font-size: 14px;
color: red;
}
.zzry-img>ul>li:hover{
background-color: red;
}
.zzry-img>ul>li:hover a{
color: #f0f0f0;
}
/*即将上映*/
.jjsy{
width: 760px;
margin-top: 82px;
}
.jjsy>p{
font-size: 26px;
color: #3899F2;
display: flex;
justify-content: space-between;
}
.jjsy>p>span>a{
font-size: 16px;
color: #3899F2;
}
.jjsy>ul{
margin-top:20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.jjsy>ul>li{
margin-bottom: 24px;
}
.xiangkan{
height: 72px;
border-right: 1px solid #c1c1c1;
border-left: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1;
}
.xiangkan>p{
padding: 12px;
font-size: 14px;
color: #FCB517;
}
.yugao{
font-size:14px;
border-top: 1px solid #c1c1c1;
}
.yugao>a{
color: #989898;
text-align: center;
margin-top:5px;
width: 50%;
}
.yugao>a:last-child{
padding: 0 20px;
}
.yugao>a:not(:last-child){
display: inline-block;
border-right:1px dashed #c1c1c1;
}
.yugao>.yushou{
color: #549DF2;
}
.sysj>p{
margin-top: 15px;
font-size: 14px;
color: #c1c1c1;
margin: 10px;
text-align: center;
}
/*热播电影*/
.rebo{
display: flex;
justify-content: space-between;
}
.rebo>.rebo1>span{
font-size: 26px;
color: red;
}
.rebo2>span>a{
font-size: 14px;
color: red;
align-self: flex-end;
}
.rebo>div>a{
font-size: 12px;
margin: 12px 0 0 20px;
}
.rb-img{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.rb-img>li{
margin-top: 30px;
}
/*右边*/
.box-r{
width: 360px;
}
.box-r>p{
font-size: 26px;
color: red;
margin-bottom: 20px;
}
.piaofang>li:first-child>a>img{
float: left;
margin-right:10px;
margin-bottom: 20px;
}
.piaofang>li:first-child>a>div{
float: left;
}
.piaofang>li:first-child>a>div>p{
font-size: 16px;
margin: 10px ;
}
.piaofang>li:first-child>a>div>p:last-child{
font-size: 12px;
color: red;
}
.piaofang>li:nth-child(2){
clear: both;
}
.piaofang>li:not(:first-child) i{
margin-right: 13px;
}
.piaofang>li:last-child i{
margin-right: 5px;
}
.pfs{
float: right;
font-size: 12px;
color: red;
}
.piaofang>li{
margin-bottom: 16px;
}
.ph{
color:red;
}
/*今日头条*/
.jrtt{
height: 104px;
outline: 1px solid #c1c1c1;
margin-top: 20px;
}
.jrtt2{
width: 40px;
height: 104px;
background-color:#EE4238;
}
.jrtt2>p{
padding: 10px;
color: #f0f0f0;
font-size: 16px;
}
.jrtt2,
.jrtt3{
float: left;
}
.jrtt3{
width: 300px;
margin-left: 13px;
margin-top: 30px;
}
.jrtt3>span:nth-child(1){
font-size: 22px;
color: red;
}
.jrtt3>span:nth-child(2){
font-size: 16px;
color: red;
}
.jrtt3>span:nth-child(3)>a{
font-size: 14px;
color: red;
float: right;
}
.jrtt3>p>span{
font-size: 14px;
color: #c1c1c1;
}
.jrtt3>p>span:first-child{
margin-right: 20px;
}
/*最受期待*/
.zsqd{
padding-top: 75px;
clear: both;
height: 772px;
margin-bottom: 35px;
}
.zsqd2>span:first-child{
color: #FDB301;
font-size: 26px;
}
.zsqd2>span>a{
color: #FDB301;
font-size: 14px;
}
.zsqd2>span:last-child{
float: right;
}
.zsqd>ul>li:first-child>a>img{
margin-right: 10px;
}
.zsqd>ul>li:first-child>a>div>p:nth-child(1){
font-size: 16px;
padding-top: 65px;
}
.zsqd>ul>li:first-child>a>div>p:nth-child(2){
font-size: 14px;
color: #c1c1c1;
padding-top: 20px;
}
.zsqd>ul>li:first-child>a>div>p:nth-child(3){
font-size: 12px;
color: #FDB301;
padding-top: 12px;
}
.zsqd>ul>li{
margin-top: 20px;
}
.zsqd>ul>li:nth-child(1){
height: 196px;
outline: 1px solid #c1c1c1;
}
.zsqd>ul>li:nth-child(2){
width: 170px;
height: 180px;
float: left;
outline: 1px solid #c1c1c1;
}
.zsqd>ul>li:nth-child(3){
width: 170px;
height: 180px;
float: right;
outline: 1px solid #c1c1c1;
}
.zsqd>ul>li:nth-child(4){
clear: both;
padding-top: 20px;
}
.zsqd>ul>li:first-child>a>img{
float: left;
}
.xk{
font-size: 12px;
color: #FDB301;
margin:10px 0 10px 10px;
}
.qybs{
margin-left: 10px;
margin-top: 10px;
}
.zsqd>ul>li>a>i{
color: #c1c1c1;
}
.zsqd>ul>li>a>span:first-child{
font-size: 14px;
}
.zsqd>ul>li>a>span:last-child{
font-size: 12px;
color: #FDB301;
float: right;
}
/*top 100*/
.top{
height: 420px;
}
.top>div{
display: flex;
justify-content: space-between;
}
.top>div>span{
color: #FDB33F;
}
.top>div>span>a{
color: #FDB33F;
}
.pfs2{
color: #FDB33F;
float: right;
}
.ph2{
color: #FDB33F;
}
/*脚注*/
footer{
margin-top: 100px;
height: 150px;
background-color: #262426;
}
footer>div{
width: 920px;
margin: 0 auto;
text-align: center;
padding-top: 50px;
}
footer>div>p{
font-size: 14px;
color: #585858;
}
/*猫*/
.mao{
position: relative;
}
.mao>a>img{
position: fixed;
bottom: 160px;
right: -60px;
transition-duration:1s;
}
.mao:hover>a>img{
bottom: 160px;
right: 0px;
transition-duration: 1s;
}