网站宣传的传统方式有哪些,wordpress 微信商城模板,dw如何在网站做弹窗,北京网站设计济南兴田德润团队怎么样#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 #x1f… 作者主页Java李杨勇 简介Java领域优质创作者、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言 动图演示 文末获取源码 代码目录 主要代码实现 主页HTML布局 !doctype html
html
head
link relstylesheet typetext/css hrefcss/default.css/
link relstylesheet typetext/css hrefcss/mobile.css/
link relstylesheet hrefcss/jquery-ui.css
script typetext/javascript srcjs/jquery-1.8.3.min.js/script
script typetext/javascript srcjs/common.js/script
meta charsetutf-8
meta nameviewport contentwidthdevice-width,maximum-scale1.0,user-scalableno
title大数据智慧能力 - 网络能力 /title
/head
bodydiv idwrapperh1大数据智慧能力 - 网络能力 /h1h2strong重点关注/strongsubFocus on the indicators/subb classlogoline/bb classlogoline1/bb classlogoline2/bb classlogoline3/bb classlogoline4/b/h2!--时间区--div classdate-timerpstrong idH/strongstrong:/strongstrong idM/strongstrong idS classhide/strong/pem idD/emulli idY/lili idMH/lili idTD/li/ul/divdiv classbig-index-1ullib classanimation-1/bb classanimation-2/bb classanimation-3/bpVLR登记用户数/pstrong174.6069/strong/lilib classanimation-1/bb classanimation-2/bb classanimation-3/bpVLR登记用户数/pstrong174.6069/strong/lilib classanimation-1/bb classanimation-2/bb classanimation-3/bpVLR登记用户数/pstrong174.6069/strong/lilib classanimation-1/bb classanimation-2/bb classanimation-3/bpVLR登记用户数/pstrong174.6069/strong/lilib classanimation-1/bb classanimation-2/bb classanimation-3/bpVLR登记用户数/pstrong174.6069/strong/lilib classanimation-1/bb classanimation-2/bb classanimation-3/bpVLR登记用户数/pstrong174.6069/strong/li/ul/divdiv classsubmenuullia href#thisb68/bspan无线专业em/em/span/a /lilia href#this classactiveb69/bspan交换专业em/em/span/a /lilia href#thisb70/bspan数据专业em/em/span/a /lilia href#thisb71/bspan输出专业em/em/span/a /li/ul/divdiv classcenter-areadiv classpandect-areah3p当前08时sub8 points/sub/pstrong总览/strongem 11时29.742 Erl/em/h3span classpandect-area-leftb/b/spandiv classpandect-area-centerimg srcimages/charts.png //divspan classpandect-area-rightb/b/span/divdiv classdetails1-areaspan classdetailsl-area-left/spandiv classdetails1-area-centerh3VLR登录用户数/h3dldt上月平均值/dt/ul448875/dddt昨日语音网络接通率/dtddul/dlb/b/divspan classdetailsl-area-right/span/divdiv classdetails2-areaspan classdetails2-area-left/spandiv classdetails2-area-centerh3A口话务量/h3dldt上月平均值/dt448875/dddt昨日语音网络接通率/dtdt今日语音网络接通率 /dtddulli/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili classred/lili classred/lili classred/lili classred/lili classred/lili/lili/lili/lili/lili/lili/lili/li/ul448875/dd/dlb/b/divspan classdetails2-area-right/span/div/divdiv classright-areah3语音网络接通率 b/b/h3div classarea-inbox-1dldt上月平均值/dtdd classfont12span76.525%/spanb/b/dddt classml-20今日语音网络接通率/dtdd classfont-red ml-20span74.113%/spanb/b/dddt今日语音网络接通率/dtddspan68.113%/spanb/b/dd/dldiv classround-1/divdiv classround-2/divdiv classround-330%/divdiv classround-4/div/divdiv classarea-inbox-2ullistrong12/strong74.23%b/bem/em/lilistrong16/strong71.19%b/bem/em/lilistrong18/strong68.02%b/bem/em/li/uldiv classarea-textb classanimation-line1/bh4口径说明/h4p classtext_containerscriptvar s 当日VLR登记用户数、昨日VLR登记用户数、上月平均值当日语音网络接通率、昨日语音网络接通; var con $(.text_container); var index 0; var length s.length; var tId null; function start(){ con.text(); tIdsetInterval(function(){ con.append(s.charAt(index)); if(index length){ clearInterval(tId); index 0; start() } },100); } start();/script/pb classanimation-line2/b/div/div/divdiv classtime-base-outerb classline1/bdiv classtime-basediv classslider2/divscript srcjs/jquery_and_jqueryui.js/scriptscript srcjs/index.js/script/divb classline2/b/div/div
/body
/htmlCSS样式
import url(http://fonts.googleapis.com/css?familyBitter:400,700,400italic);
/* ui slider pips */
.ui-slider-horizontal.ui-slider-pips {margin-bottom: 2.8em;
}
.ui-slider-pips .ui-slider-number,
.ui-slider-pips .ui-slider-pip-hide {display: none;
}
.ui-slider-pips .ui-slider-pip-number .ui-slider-number {display: block;
}
.ui-slider-pips .ui-slider-pip {width: 2em;height: 1em;line-height: 1em;position: absolute;font-size: 0.8em;color: #999;overflow: visible;text-align: center;top: 20px;left: 20px;margin-left: -1em;cursor: pointer;
}
.ui-slider-pips .ui-slider-line {background: #999;width: 1px;height: 3px;position: absolute;left: 50%;
}
.ui-slider-pips .ui-slider-number {position: absolute;top: 5px;left: 50%;margin-left: -1em;width: 2em;
}
.ui-slider-pip:hover .ui-slider-number {color: white;font-weight: bold;
}
.ui-slider-vertical.ui-slider-pips {margin-bottom: 0;margin-right: 2em;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-pip {text-align: left;top: 20px;left: 20px;margin-left: 0;margin-top: -0.5em;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-line {width: 3px;height: 1px;position: absolute;top: 50%;left: 0;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-number {top: 50%;left: 0.5em;margin-left: 0;margin-top: -0.5em;width: 2em;
}
.ui-slider-vertical.ui-slider-pip:hover .ui-slider-number {color: white;font-weight: bold;
}
.ui-slider-float .ui-slider-tip,
.ui-slider-float .ui-slider-tip-number {position: absolute;visibility: hidden;top: -40px;display: block;width: 34px;margin-left: -17px;left: 50%;height: 20px;line-height: 20px;background: white;border-radius: 3px;box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);text-align: center;font-size: 12px;opacity: -1;transition: all 0.4s ease;color: #333;
}
.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-number {opacity: 0.9;top: -30px;color: #333;visibility: visible;
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-number {top: 15px;
}
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-number {top: 5px;font-weight: normal;
}
.ui-slider-float .ui-slider-tip:after,
.ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {content: ;width: 0;height: 0;border: 5px solid rgba(255, 255, 255, 0);border-top-color: #ffffff;position: absolute;bottom: -10px;left: 50%;margin-left: -5px;
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {border: 5px solid rgba(255, 255, 255, 0);border-bottom-color: #ffffff;top: -10px;
}
/* ------------------------- */
/* demo stuff */
body {font-family: bitter;padding: 20px 50px;text-align: center;background: url(http://wallpaperswa.com/thumbnails/detail/20120313/abstract%20blue%20lights%20orange%20bokeh%20gaussian%20blur%201920x1200%20wallpaper_www.wallpaperhi.com_43.jpg);background-size: cover;color: white;
}
h1,
h3 {margin: 0 0 10px ;
}
h3 {font-weight: 200;margin-bottom: 10px;
}
h4 {font-weight: 300;font-style: italic;color: black;padding: 10px 20px;background: rgba(255, 255, 255, 0.7);display: inline-block;border-radius: 4px;
}
a {color: #2cafe3;
}
.wrapper {padding: 40px 40px 0;border: 1px dotted rgba(200, 200, 255, 0.6);background: rgba(0, 10, 20, 0.7);border-radius: 10px;
}
.ui-slider {box-shadow: inset 0 2px 1px #aaa;border-color: #000;
}
.ui-slider-horizontal {height: 10px;background: #ddd;
}
作品来自于网络收集、侵权立删
上面的图片文件以及js文件等需要引入进来 源码获取 大家点赞、收藏、关注、评论啦 、查看微信公众号获取 打卡 文章 更新 58/ 100天 专栏推荐阅读 EChartsHTML5大数据模板《100套》 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
