jquery.sparkline实现系统服务器正常运行时间监视器数据图表效果代码-html代码-BFW代码库

jquery.sparkline实现系统服务器正常运行时间监视器数据图表效果代码

代码语言：html

所属分类：图表

代码描述：jquery.sparkline实现系统服务器正常运行时间监视器数据图表效果代码

代码标签： jquery.sparkline 系统服务器正常运行时间监视器数据图

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Muli:300,400'>

    <style>
        *, *:before, *:after {
          box-sizing: border-box;
        }
        
        body {
          font-family: "Muli", sans-serif;
          font-weight: 300;
          font-size: 14px;
          margin: 0;
          padding: 30px;
          background: #eaeaea;
        }
        
        h1, h2, h3, h4, h5, h6, p {
          margin: 0;
          padding: 0;
          font-weight: 300;
        }
        
        h1.hero {
          margin: 0 0 40px 0;
          font-size: 4em;
        }
        h1.hero small {
          text-transform: uppercase;
          font-size: 0.3em;
          color: #333;
          display: block;
        }
        
        div.monitor {
          opacity: 0.7;
          width: 100%;
          overflow: hidden;
          float: left;
          margin: 0 20px 20px 0;
        }
        div.monitor:hover {
          opacity: 1;
        }
        div.monitor div.wrap {
          padding: 20px 20px 30px;
        }
        div.monitor span.spark {
          opacity: 0.6;
        }
        div.monitor h1 {
          margin: 0 0 20px 0;
          font-size: 3em;
        }
        div.monitor p {
          display: block;
          width: 100%;
          padding: 5px 12px;
          color: #FFF;
          font-size: 0.9em;
          opacity: 0.7;
        }
        div.monitor p span {
          float: right;
        }
        div.monitor.good {
          background: #b4e372;
        }
        div.monitor.good div.wrap {
          border: 1px solid #7fbf26;
        }
        div.monitor.good h1 {
          color: #699d1f;
        }
        div.monitor.good p {
          background: #699d1f;
        }
        div.monitor.average {
          background: #dc9c37;
        }
        div.monitor.average div.wrap {
          border: 1px solid #8b5e18;
        }
        div.monitor.average h1 {
          color: #684712;
        }
        div.monitor.average p {
          background: #684712;
        }
        div.monitor.poor {
          background: #b95c5c;
        }
        div.monitor.poor div.wrap {
          border: 1px solid #733232;
        }
        div.monitor.poor h1 {
          color: #57252.........完整代码请登录后点击上方下载按钮下载查看