大数据影视作品网页模板_大数据作品资源-CSDN文库

共21个文件

png：11个

js：2个

css：2个

javascript

web开发

需积分: 19 77 浏览量 2018-05-06 13:33:47 上传评论收藏 94KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5大数据影视作品点击浏览排行榜网页模板.rar （21个子文件）

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

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

<!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="hms"></span> </div> </div> <div class="playNum">68,383,28</div> <div class="content"> <div class="item item1">                                      </div> <div class="item">

评论收藏

内容反馈