zoukankan      html  css  js  c++  java
  • 色块图

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    /*#191970*/
    table {
    100%;
    border: 1px solid #cccccc;
    font-size: 12px;
    padding-bottom: 5px;
    }

    th {
    border-bottom: 1px solid #cccccc;
    text-align: left;
    }

    th, td {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px
    }

    td {
    position: relative;
    }

    td:nth-child(3), td:nth-child(4), td:nth-child(5), td:nth-child(6) {
    padding-left: 5px;
    border-top: 5px solid white;
    border-right: 5px solid white;
    }

    .bac {
    position: absolute;
    100%;
    height: 100%;
    background: #0000ff;
    top: 0;
    left: 0;
    }

    .num {
    position: absolute;
    display: inline-block;
    top: 7px;
    left: 5px;
    }
    </style>
    </head>
    <body>
    <table cellpadding="0" cellspacing="0">
    <tr>
    <th>日期</th>
    <th>新用户</th>
    <th>次日</th>
    <th>3日</th>
    <th>7日</th>
    <th>30日</th>
    </tr>

    <tr>
    <td>2018-02-03</td>
    <td>222</td>
    <td>
    <div class="bac" style="opacity: 0.1"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.2"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.3"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.4"></div>
    <span class="num">4.555%</span></td>
    </tr>
    <tr>
    <td>2018-02-03</td>
    <td>222</td>
    <td>
    <div class="bac" style="opacity: 0.6"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.5"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.4"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.3"></div>
    <span class="num">4.555%</span></td>
    </tr>

    <tr>
    <td>2018-02-03</td>
    <td>222</td>
    <td>
    <div class="bac" style="opacity: 0.9"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.8"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.7"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.6"></div>
    <span class="num">4.555%</span></td>
    </tr>
    <tr>
    <td>2018-02-03</td>
    <td>222</td>
    <td>
    <div class="bac" style="opacity: 0.6"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.7"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.8"></div>
    <span class="num">4.555%</span></td>
    <td>
    <div class="bac" style="opacity: 0.9"></div>
    <span class="num">4.555%</span></td>
    </tr>
    </table>
    <script>
    </script>
    </body>
    </html>













































  • 相关阅读:
    【2020-08-30】盼头这事,还是得有一点好
    【一句日历】2020年9月
    【2020-08-29】边走边想吧,少年
    【2020-08-28】欲望与能力的矛盾假象
    【2020-08-27】人生十三信条
    【2020-08-26】日复一日,年复一年
    【2020-08-25】今天七夕,男人有话要说
    【2020-08-24】处处较真,其实就是自己虚荣
    【2020-08-23】人生十三信条
    【2020-08-22】人生十三信条
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/9001825.html
Copyright © 2011-2022 走看看