猫眼首页

Posted sunshine-鸿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了猫眼首页相关的知识,希望对你有一定的参考价值。

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" >
     </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" >
      </a>
     </button>
     
    </li>
    <li>
     <a href="denglu.html">
      <img src="../img/04.png" >
     </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" >
   </a>
   <a href="zixun.html">
    <img src="../img/shouye1.png" >
   </a>
   <a href="#">
    <img src="../img/shouye2.png" >
   </a>
   <a href="#">
    <img src="../img/shouye3.png" >
   </a>
   <a href="#">
    <img src="../img/shouye4.png" >
   </a>
   <a href="#">
    <img src="../img/shouye5.png" >
   </a>
   <a href="#">
    <img src="../img/shouye6.png" >
   </a>
   <a href="#">
    <img src="../img/shouye7.png" >
   </a>
  </div>
 </div> 

<!--整个内容宽度 -->
<div class="box">
 <div class="box-l">
  <div class="zzry">
  <!-- 正在热映 -->
    <span>正在热映(55部)</span>
    <a href="#">全部&gt;</a>
  </div>

  <!-- 正在热映图片 -->
  <div class="zzry-img">
   <ul>
    <li>
     <a href="#">
     <img src="../img/hot01.png" ></a>
     <p><a href="#">购票</a></p>   
    </li>
    <li>
     <a href="#">
     <img src="../img/hot_02.png" ></a>
     <p><a href="#">购票</a></p>   
    </li>
    <li>
     <a href="#">
     <img src="../img/hot_03.png" ></a>
     <p><a href="#">购票</a></p>   
    </li>
    <li>
     <a href="xiangqing.html" target="_blank">
     <img src="../img/hot_04.png" ></a>
     <p><a href="xiangqing.html">购票</a></p>   
    </li>
    <li>
     <a href="#">
     <img src="../img/hot_05.png" ></a>
     <p><a href="#">购票</a></p>   
    </li>
    <li>
     <a href="#">
     <img src="../img/hot_06.png" ></a>
     <p><a href="#">购票</a></p>   
    </li>
    <li>
     <a href="#">
     <img src="../img/hot_77.png" ></a>
     <p><a href="#">购票</a></p>   
    </li>
    <li>
     <a href="#">
     <img src="../img/hot_08.png" ></a>
     <p><a href="#">购票</a></p>   
    </li>
   </ul>
  </div>

  <!-- 即将上映 -->
  <div class="jjsy">
   <p>
   即将上映(276部)
    <span>
    <a href="#">全部&gt;</a>
    </span>
   </p>
   <ul>
    <li>
     <img src="../img/comingSoon_01.png" >
     <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" >
     <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" >
     <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" >
     <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" >
     <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" >
     <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" >
     <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" >
     <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="#">全部&gt;</a>
    </span>
   </div>
  </div> 
   <ul class="rb-img">
    <li>
     <a href="#">
      <img src="../img/shouye14.png" >
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/hotPlay_02.png" >
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/hotPlay_03.png" >
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/hotPlay_04.png" >
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/hotPlay_05.png" >
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/hotPlay_06.png" >
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/xunlongjue.png" >
     </a>
    </li>
   </ul>
  

 


 </div>

 <!-- 右边部分 -->
 <div class="box-r">
  <p>今日票房</p>
  <ul class="piaofang">
   <li>
    <a href="#">
     <img src="../img/shouye9.png" >
     <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="#">查看更多&gt;</a>
    </span>
    <p>
     <span> 
      北京时间22:46:26
     </span>
     <span>猫眼专业版实时票房数据</span>
    </p>
   </div>
  </div>

  <!-- 最受期待的 -->
  <div class="zsqd">
   <div class="zsqd2">
    <span>最受期待</span>
    <span>
     <a href="#">查看完整榜单&gt;</a>
    </span>
 
   </div>
   
   <ul>
    <li>
     <a href="#">
      <img src="../img/shouye10.png" >
      <div>
       <p>三生三世十里桃花</p>
       <p>上映时间:2016</p>
       <p>212184人想看</p>
      </div>
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/shouye11.png" >
      <p class="qybs">奇异博士</p>
      <p class="xk">152788人想看</p>
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/shouye12.png" >
      <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="#">查看完整榜单&gt;</a>
    </span>
   </div> 
   <ul class="piaofang">
   <li>
    <a href="#">
     <img src="../img/shouye13.png" >
     <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>&copy;2016 猫眼电影 maoyan.com 京ICP证160733号 京ICE 备16022489号-1  京公网安备 11010502030881号  网络文化经营许可证  电子公告服务规则</p>
   <p>北京猫眼文化传媒有限公司</p>
  </div>
 </footer>
 <!--右侧的猫 -->
 <div class="mao">
  <a href="#">
   <img src="../img/shouye15.png" >
  </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;
}

 

以上是关于猫眼首页的主要内容,如果未能解决你的问题,请参考以下文章

对猫眼电影排行的爬取

抓取猫眼top100电影信息

Python-爬虫-基本库(requests)使用-抓取猫眼电影Too100榜

网站建设时首页规划的要点

app首页新解读:如何设计总有一款你喜欢的首页

vue中用户长时间无操作返回首页