用CSS制作条形统计图的方法

内容摘要
今天同事问我如何用CSS制作条形统计图，我做了一个简单的，这里记录一下，以后用到的时候好搜索一下。里面用到了一张白色的图片，需要可以自己做一下。
文章正文

今天同事问我如何用CSS制作条形统计图，我做了一个简单的，这里记录一下，以后用到的时候好搜索一下。里面用到了一张白色的图片，需要可以自己做一下。

效果如图：

代码如下：
 

HTML/XML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title></title>  
  6. <style>  
  7. body{ font-size:12px;}  
  8. .barGraphBg { width:100px; border:#CCC 1px solid; background:url("graph_bg.gif") no-repeat scroll 0 0 transparent; text-align:center; }  
  9. </style>  
  10. </head>  
  11.   
  12. <body>  
  13. <table width="500" border="0" cellspacing="0" cellpadding="0">  
  14.   <tr>  
  15.     <td bgcolor="#eee">来路</td>  
  16.     <td bgcolor="#eee">流量</td>  
  17.   </tr>  
  18.   <tr>  
  19.     <td height="25">www.baidu.com</td>  
  20.     <td>  
  21.         <table width="100" height="10"><tr><td style="background-color:#ff0000; background-position: 20px 50%;" class="barGraphBg">20%</td></tr></table>  
  22.     </td>  
  23.   </tr>  
  24.   <tr>  
  25.     <td height="25">www.google.com</td>  
  26.     <td>  
  27.         <table width="100" height="10"><tr><td style="background-color:#00ff00; background-position: 25px 50%;" class="barGraphBg">25%</td></tr></table>  
  28.     </td>  
  29.   </tr>  
  30.   <tr>  
  31.     <td>直接访问</td>  
  32.     <td height="25"><table width="100" height="10">  
  33.       <tr>  
  34.         <td style="background-color:#0000ff; background-position: 30px 50%;" class="barGraphBg">30%</td>  
  35.       </tr>  
  36.     </table></td>  
  37.   </tr>  
  38. </table>  
  39. </body>  
  40. </html>  
代码注释
[!--zhushi--]
上一篇配置IIS让你的网站可以播放mp4文件下一篇jenny：我不是一个简单的web UI

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！