js仿搜狐视频记录片列表展示效果

本文实例为大家分享了js搜狐视频记录片列表展示效果，供大家参考，具体内容如下

*{margin:0;padding:0;}
ul{list-style:none;}
#list{width:300px;height:500px;margin:40px auto;border:1px solid #ccc;}
#list .lis{width:300px;height:auto;line-height:50px;border-bottom:1px solid #ccc;float:left;}
#list .lis ul {width:300px;height:50px;}
#list .lis ul li {width:300px;height:50px;line-height:50px;display:none;}
#list .lis ul li span {display:inline-block;margin:10px;width:30px;height:30px;text-align:center;line-height:30px;background:#3366FF;color:#fff;}
#list .lis ul li p {display:inline-block;width:150px;height:50px;line-height:30px;}
#list .lis ul li div.index {float:left;width:50px;height:150px;display:line-block;}
#list .lis ul li div.index span.blur {font-weight:bold;background:#fff;color:blue;}
#list .lis ul li img {width:120px;height:120px;margin:15px;float:left;display:inline-block;}
#list .lis ul li div.desc {position:relative;float:left;width:100px;height:150px;}
#list .lis ul li div.desc p {position:absolute;left:0px;top:20px;color:#000;width:100px;height:30px;line-height:30px;}
#list .lis ul li div.desc a {width:60px;height:30px;position:absolute;bottom:5px;right:5px;text-decoration:none;background:blue;color:#fff;font-size:20px;padding:5px;border-radius:8px;dispaly:inline-block;line-height:30px;text-align:center;}
#list .lis ul li:first-child{display:block;}






 

 

  

  
  

  
  

  
   
   
   
  
  
  
   

   播放
  
  
 
 
 

 

  

  
  

  
  

  
   
   
   
  
  
  
   

   播放
  
  
 
 
 

 

  

  
  

  
  

  
   
   
   
  
  
  
   

   播放
  
  
 
 
 

 

  

  
  

  
  

  
   
   
   
  
  
  
   

   播放
  
  
 
 
 

 

  

  
  

  
  

  
   
   
   
  
  
  
   

   播放
  
  
 
 
 

 

  

  
  

  
  

  
   
   
   
  
  
  
   

   播放
  
  
 
 
 

 

  

  
  

  
  

  
   
   
   
  
  
  
   

   播放
  
  
 
 
 

 

  

  
  

  
  

  
   
   
   
  
  
  
   

   播放
  
  
 
 
 

 

  

  
  

  
  

  
   
   
   
  
  
  
   

   播放
  
  
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。