<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5大数据影视作品点击浏览排行榜网页模板</title>
<meta name="keywords" content="大数据,影视作品,点击浏览,排行榜" />
<meta name="description" content="HTML5大数据影视作品点击浏览排行榜网页模板下载。" />
<meta name="author" content="js代码(www.jsdaima.com)" />
<meta name="copyright" content="js代码(www.jsdaima.com)" />
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/iconfont.css"/>
<style type="text/css">
*{ color: #fff;}
body{ background: #191d23; width: 100%; height: 100%;}
.bg{ position: absolute; width: 100%; height: 100%; left: 0; top: 0%; z-index: -9999;}
.title_1{ width: 20%; margin: 100px auto 0;}
.time{ width: 50%; margin: 30px auto 20px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #5d6064;}
.time .text1{ background: #31d3d3; color: #fff;font-size: 14px; font-weight: 800; text-align: center; width: 180px; height: 40px; line-height: 40px;}
.tiem_content span{ font-size: 14px; color: #b2b4b6; margin-right: 10px;}
.playNum{ width: 100%; margin: 0 auto; font-size: 80px; color: #fff; text-align: center;}
.content{ width: 94%; min-width: 1400px; margin: 40px auto 0; display: flex;justify-content: space-around;}
.item{ width: 300px; height: 420px; background: url("img/itembg.png") no-repeat; background-size: 100% 100%; }
.item .title{ font-size: 24px;font-weight: 800; color: #fff; text-align: center; height: 68px; line-height: 70px;}
.portrait{ border: 2px solid #fff; border-radius: 50%;overflow: hidden;}
.portrait img{ width: 100%; height: 100%;}
/*第一个样式*/
.partition{ width: 60%; height: 30px; margin: 10px auto; border-radius: 20px; display: flex; justify-content: space-around; align-items: center; background: #20242a; color: #fff;}
.partition i{color: #fff; font-size: 20px; cursor: pointer;}
.partition div{ font-size: 14px; color: #fff; width: 40%; text-align: center;}
.list{ width: 90%;margin: 0 auto;}
.list1 div{ margin: 10px auto; color: #ffffff; text-align: center; }
.top3{ width: 100%; height: 150px; display: flex; justify-content: space-around; flex-wrap: nowrap; align-items: flex-end; background: url("img/item1bg1.png"); background-size: 100% 100%;}
.top3 div{ margin: 4px auto;}
.list1 .nick{ font-size: 12px; color: #fff; height: 13px; overflow: hidden;}
.list1 .num{ font-size: 14px; color: #fff;}
.top3_1,.top3_2,.top3_3{ width: 33.33%;}
.top3_1 .nick,.top3_2 .nick,.top3_3 .nick{ max-width: 80px;}
.top3 .top3_1{ align-self: flex-start; margin-top: 18px;}
.top3 .portrait{ width: 36px; height: 36px;}
.top4,.top5{ width: 100%; height: 52px; display: flex; justify-content: flex-start; flex-wrap: nowrap; align-items: center; }
.top4{ background: url("img/item1bg4.png"); background-size: cover;}
.top5{ background: url("img/item1bg5.png"); background-size: cover;}
.top4 .portrait,.top5 .portrait{ margin: 0 0px 0 20px;}
.top4 .num,.top5 .num{ margin: 0 ; width: 90px;}
.top4 .nick,.top5 .nick{ width: 110px; text-align: left;height: 30px;}
.top4 .portrait,.top5 .portrait{ width: 28px;height: 28px;}
/*第二个样式*/
.list2 li{ display: flex; justify-content: flex-start; flex-wrap: nowrap; margin: 18px 0 38px 0;}
.list2 li .index{ background: url("img/bg2.png") no-repeat; background-size: 100% 100%; width: 16px; height: 30px; line-height: 30px;text-indent: 2px; font-size: 16px;}
.list2 li .percent{ width: 196px;margin-left: 10px;}
.list2 .percent_title{ font-size: 13px; margin: 2px 0 2px;}
.list2 .percent_bg{position: relative;width: 100%; background: #191d23; height: 8px; border-radius: 8px;}
.list2 .percent_num{ position: absolute; width: 10%; background: #31d3d3; height: 8px; border-radius: 8px;}
.list2 .count{ width: 50px; text-align: right; line-height: 36px; height: 30px; font-size: 14px;}
/*第三个样式*/
.list3 li{ display: flex;justify-content: space-between;margin: 25px 4px 44px;}
.list3 .percent{display: flex; justify-content: flex-start; width: 82%;}
.list3 .index{ border: 1px solid #31d3d3;border-top-left-radius:30px;border-bottom-left-radius:30px; overflow: hidden;
width: 30px;background: #000; text-align: center; height: 22px; line-height: 22px;}
.list3 .percent_num{ border: 1px solid #31d3d3;border-top-right-radius:30px;border-bottom-right-radius:30px; overflow: hidden;
width: 30%; max-width: 180px; background: #31d3d3; font-size: 14px; height: 22px; line-height: 22px;}
.list3 .percent_count{ width: 42px; text-align: right; font-size: 14px; line-height: 22px; height: 22px;}
/*第四个样式*/
.list4 li{ display: flex; justify-content: flex-start; height: 46px; background: url("img/item4_bg.png");
background-size: cover; align-items: center; margin: 10px 0;}
.list4 .index{ width: 50px; text-align: center; height: 46px; line-height: 46px; font-size: 26px;}
.list4 .portrait{ width: 30px; height: 30px;}
.list4 .nick{ width: 120px; margin-left: 16px;}
</style>
</head>
<body>
<img class="bg" src="img/bg.png"/>
<div class="title_1"><img src="img/title.png"/></div>
<div class="time">
<div class="text1">今日视频播放量</div>
<div class="tiem_content">
<!--<span class="ymd">2018.03.21</span>-->
<span class="hms"></span>
</div>
</div>
<div class="playNum">68,383,28</div>
<div class="content">
<div class="item item1">
<!--<div class="data">-->
<!--<div class="title">平台KOL - TOP5</div>-->
<!--<div class="partition">-->
<!--<i class="iconfont icon-sanjiao4" onclick="item1(this)" data-type="0"></i>-->
<!--<div>腾讯视频</div>-->
<!--<i class="iconfont icon-sanjiao3" onclick="item1(this)" data-type="1"></i>-->
<!--</div>-->
<!--<div class="list list1">-->
<!--<div class="top3">-->
<!--<div class="top3_2">-->
<!--<div class="portrait"><img src="img/tx.png"/></div>-->
<!--<div class="nick">sdf</div>-->
<!--<div class="num">1234</div>-->
<!--</div>-->
<!--<div class="top3_1">-->
<!--<div class="portrait"><img src="img/tx.png"/></div>-->
<!--<div class="nick">gdfsg</div>-->
<!--<div class="num">2134</div>-->
<!--</div>-->
<!--<div class="top3_3">-->
<!--<div class="portrait"><img src="img/tx.png"/></div>-->
<!--<div class="nick">fdsfg</div>-->
<!--<div class="num">43214</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="top4">-->
<!--<div class="portrait"><img src="img/tx.png" /></div>-->
<!--<p class="nick">平台OKL</p>-->
<!--<p class="num">666</p>-->
<!--</div>-->
<!--<div class="top5">-->
<!--<div class="portrait"><img src="img/tx.png" /></div>-->
<!--<p class="nick">平台OKsda</p>-->
<!--<p class="num">666</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
<div class="item">
HTML5大数据影视作品点击浏览排行榜网页模板.rar （21个子文件） 
HTML5大数据影视作品点击浏览排行榜网页模板 HTML5大数据影视作品点击浏览排行榜网页模板 
index.html 19KB img 
bg.png 46KB up.png 1KB item1bg1.png 9KB item1bg5.png 3KB tx.png 2KB item1bg4.png 3KB item4_bg.png 2KB down.png 1KB itembg.png 6KB title.png 16KB bg2.png 1KB js 
base_common.js 6KB jquery.min.js 94KB data.json 14KB font 
iconfont.svg 1KB iconfont.woff 1KB iconfont.eot 2KB iconfont.ttf 2KB css common.css 845B iconfont.css 2KB资源评论
