zoukankan      html  css  js  c++  java
  • 用UL标签+CSS实现的柱状图

    代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
      
    <title>基于CSS的柱状图实现</title>
      
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
    <style type="text/css">
     body 
    {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;}
     h3 
    {font-weight:normal;display:block;width:600px;text-align:center;}
     
    /*ul*/
     ul#q-graph 
    {
      border
    :2px solid #0063be;
      background
    :#adfe12 url(l2008524151456.png) repeat-x scroll 0 0 !important;
      background
    :#adfe12 repeat-x scroll 0 0;
      height
    :300px !important;
      height
    :304px;
      width
    :600px;
      position
    :relative;
      list-style
    :none;
      margin
    :1.1em 1em 3.5em;
      padding
    :0;
     
    }
     #q-graph li 
    {
      position
    :absolute;
      text-align
    :center;
      bottom
    :0;
      padding
    :0
      margin:0
    ;
     
    }
      
    /* ul li */
     li.qtr 
    {
      width
    :150px;
      height
    :300px;
      border-right
    :1px dotted #41a3e2;
      z-index
    :2;
     
    }
     li#q1 
    {left:0;}
     li#q2 
    {left:150px;}
     li#q3 
    {left:300px;}
     li#q4 
    {left:450px;border-right:none;}
     
    /* ul li ul */
     #q-graph ul 
    {list-style:none;}
     
    /* ul li ul li */
     li.bar 
    {
      width
    :34px;
      color
    :#fff;
     
    }
     li.north 
    {
      left
    :36px;
      background
    :#ddd url(http://www.lanrentuku.com/images/uppic/200805280943450.gif) no-repeat 0 0;
     
    }
     li.south 
    {
      left
    :80px;
      background
    :#ddd url(http://www.lanrentuku.com/images/uppic/200805280943450.gif) no-repeat -34px 0;
     
    }
      
    /* ul li divs */
     li#ticks 
    {
      left
    :0;
      height
    :300px;
      width
    :100%;
      z-index
    :1;
     
    }
     div.ticks 
    {
      position
    :relative;
      height
    :60px;
      border-top
    :1px dotted #41a3e2;
     
    }
     div.ticks:first-child 
    {border-top:none;} /*only4 Firefx IE 7+*/
     div.ticks p 
    {
      position
    :absolute;
      left
    :103%;
      top
    :-11pt;
     
    }
      
    </style>
     
    </head>
     
    <body>
    <ul id="q-graph">
     
    <li id="q1" class="qtr">Q1
     
    <ul>
      
    <li class="north bar" style="height:111px;">18</li>
      
    <li class="south bar" style="height:99px;">16</li>
     
    </ul></li>
     
    <li id="q2" class="qtr">Q2
     
    <ul>
      
    <li class="north bar" style="height:198px;">32</li>
      
    <li class="south bar" style="height:210px;">34</li>
     
    </ul></li>
     
    <li id="q3" class="qtr">Q3
     
    <ul>
      
    <li class="north bar" style="height:260px;">43</li>
      
    <li class="south bar" style="height:198px;">32</li>
     
    </ul></li>
     
    <li id="q4" class="qtr">Q4
     
    <ul>
      
    <li class="north bar" style="height:111px;">18</li>
      
    <li class="south bar" style="height:198px;">32</li>
     
    </ul></li>
      
    <li id="ticks">
     
    <div class="ticks"><p>50</p></div>
     
    <div class="ticks"><p>40</p></div>
     
    <div class="ticks"><p>30</p></div>
     
    <div class="ticks"><p>20</p></div>
     
    <div class="ticks"><p>10</p></div>
    </li>
    </ul>
     
    </body>
    </html>
    用UL标签+CSS实现的柱状图
    <br/>
    更多请访问:懒人图库  www.cnblogs.com/iztg

     代码如上:

    • Q1
      • 18
      • 16
    • Q2
      • 32
      • 34
    • Q3
      • 43
      • 32
    • Q4
      • 18
      • 32
    • 50

      40

      30

      20

      10

    用UL标签+CSS实现的柱状图
    更多请访问:www.cnblogs.com/iztg
  • 相关阅读:
    [DB] 数据库的连接
    JS leetcode 翻转字符串里的单词 题解分析
    JS leetcode 拥有最多糖果的孩子 题解分析,六一快乐。
    JS leetcode 搜索插入位置 题解分析
    JS leetcode 杨辉三角Ⅱ 题解分析
    JS leetcode 寻找数组的中心索引 题解分析
    JS leetcode 移除元素 题解分析
    JS leetcode 最大连续1的个数 题解分析
    JS leetcode 两数之和 II
    JS leetcode 反转字符串 题解分析
  • 原文地址:https://www.cnblogs.com/gredswsh/p/1930309.html
Copyright © 2011-2022 走看看