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;}