jquery+css实现待办事项待办任务彩色柱状图表效果代码-html代码-BFW代码库

jquery+css实现待办事项待办任务彩色柱状图表效果代码

代码语言：html

所属分类：图表

代码描述：jquery+css实现待办事项待办任务彩色柱状图表效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prefixfree.js"></script>
    <style>
        body {
      background: #141011;
      overflow: hidden;
      font-family: 'Open Sans', sans-serif;
    }
    .center {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
    }
    #left-side,
    #right-side {
      position: inherit;
      display: inline-block;
      height: 330px;
      width: 100px;
      margin: 0;
      padding: 0;
    }
    #right-side {
      left: 110px;
      width: 500px;
      margin-left: -10px;
    }
    #left-side > div {
      height: 50px;
      width: 60px;
      position: relative;
      background: #362F31;
      color: #FFF;
      display: block;
      padding: 10px;
      margin: 10px 0 10px 10px;
    }
    #right-side > div {
      height: 50px;
      position: relative;
      color: #000;
      display: block;
      padding: 10px;
      margin: 10px;
      margin: 10px 10px 10px 0px;
    }
    #left-side > div:hover {
      cursor: pointer;
      background: #454344;
    }
    #left-side div div,
    #right-side div div {
      height: 40px;
    }
    h1 {
      color: #ABA5A7;
      font-size: 16px;
      margin-bottom: 5px;
    }
    p {
      font-size: 12px;
    }
    #one-b {
      background: #EF4707;
      border-right: 70px inset #BC390D;
      width: 300px;
    }
    #two-b {
      background: #FF9704;
      border-right: 80px inset #C4770B;
      width: 100px;
    }
    #three-b {
      background: #FBD721;
      border-right: 30px inset #C6A91C;
      width: 250px;
    }
    #four-b {
      background: #4899E8;
      border-right: 150px inset #3879B8;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class='center'>
        <div id='left-side'>
            <div id='one'>
                <div>
                    <h1>3</h1>
                </div>
                <p>40 tasks</p>
            </div>
            <div id='two'>
                <div>
                    <h1>1</h1>
                </div>
                <p>20 tasks<.........完整代码请登录后点击上方下载按钮下载查看