符合标准的可访问的可视化CSS数据图表

网络整理 - 07-27

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Horizontal Bar Chart / Accessible Data Examples</title>
<style type="text/css" media="screen">
    /* SETUP */
    * {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    body {
      font-family: Helvetica, Arial, sans-serif;
      color: #333;
    }
    a {
      color: #2D7BB2;
      text-decoration: none;
      font-weight: bold;
    }
    a:hover {
      color: #333;
    }
    h2, h3, h4 {
      clear: both;
      margin: 0 0 0.6em 0;
    }
    h3 {
      color: #666;
    }
    .section {
      float: left;
      clear: left;
      padding: 1em 2em;
    }

    /* CHART LISTS */
    .chartlist {
      float: left;
      border-top: 1px solid #EEE;
      width: 15em;
    }
    .chartlist li {
      position: relative;
      display: block;
      border-bottom: 1px solid #EEE;
      _zoom: 1;
    }
    .chartlist li a {
      display: block;
      padding: 0.4em 4.5em 0.4em 0.5em;
      position: relative;
      z-index: 2;
    }
    .chartlist .count {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      margin: 0 0.3em;
      text-align: right;
      color: #999;
      font-weight: bold;
      font-size: 0.875em;
      line-height: 2em;
    }
    .chartlist .index {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: #B8E4F5;
      text-indent: -9999px;
      overflow: hidden;
      line-height: 2em;
    }
    .chartlist li:hover {
      background: #EFEFEF;
    }
</style>
</head>
<body>
<div class="section">
    <h2>2006-2011 JZxue.com</h2>

    <ul class="chartlist">
      <li>
        <a href="">Cuoxin.com</a> _fcksavedurl=""">Cuoxin.com</a>"
        <span class="count">420</span>
        <span class="index" style="width: 42%">(42%)</span>
      </li>
      <li>
        <a href="">Cuoxin.com</a>
        <span class="count">280</span>
        <span class="index" style="width: 28%">(28%)</span>
      </li>
      <li>
        <a href="">Cuoxin.com</a>
        <span class="count">200</span>
        <span class="index" style="width: 20%">(20%)</span>
      </li>
      <li>
        <a href="">Cuoxin.com</a>
        <span class="count">100</span>
        <span class="index" style="width: 10%">(10%)</span>
      </li>
    </ul>
</div>
</body>
</html>