码迷，mamicode.com
首页 > 其他好文 > 详细

猫眼首页

时间：2018-05-06 16:17:27      阅读：443      评论：0      收藏：0      [点我收藏+]

标签：get   专业   last   border   long   footer   tle   重庆   demo   

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

 

猫眼首页

标签：get   专业   last   border   long   footer   tle   重庆   demo   

原文地址：https://www.cnblogs.com/yehongrun/p/8998071.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！