免费模板网
当前位置: 首页>CSS图表> 超简单水平CSS图表

CSS图表

超简单水平CSS图表

分类:CSS图表 时间:2009/7/25 14:48:25 浏览:12603 次

演示效果截图

超简单水平CSS图表

CSS代码

<style type="text/css">
div.progress-container {
  border: 1px solid #ccc; 
  width: 100px; 
  margin: 2px 5px 2px 0; 
  padding: 1px; 
  float: left; 
  background: white;
}
div.progress-container > div {
  background-color: #ACE97C; 
  height: 12px
}
</style>

HTML代码

<div class="progress-container">          
<div style="width: 95%"></div>95%
</div>
<h3>www.865171.cn</h3>
<div class="progress-container">          
<div style="width: 35%"></div>35%
</div>

上一篇:纯CSS代码实现动态水平图表

下一篇:利用CSS和JavaScript勾画出来的图表效果

站长常用工具

最新图表

热门图表

赞助商链接