用CSS实现基本条状图表效果- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 用CSS实现基本条状图表效果

技术文章搜索

关键字

CSS样式表中的用CSS实现基本条状图表效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 100 ::

收藏到网摘: n/a

不用javascript实现带序号的表格隔行换色的效果用javascript来控制链接的target 属性的代码

CSS条状图表是我们在网页设计中常常会遇到的一种形式。条状图表可以将数量，以条状图形的形式直观的表示出来。
　　CSS基本条状图表的实现方法是什么？我们看下面的实例介绍：

复制代码代码如下:

<div class="graph"> 
<strong class="bar" style="width: 24%;">24%</strong> 
</div> 

这是xhtml代码，定义了一个容器，应用类graph，其中包括了一个xhtml元素strong，并且对这个元素应用类bar。
　　我们看下面的CSS定义：

复制代码代码如下:

.graph { 
 position: relative; /* IE is dumb */ 
 width: 200px; 
 border: 1px solid #B1D632; 
 padding: 2px; 
} 
.graph .bar { 
 display: block; 
 position: relative; 
 background: #B1D632; 
 text-align: center; 
 color: #333; 
 height: 2em; 
 line-height: 2em; 
} 
.graph .bar span { position: absolute; left: 1em; } 

通过上面的边框，颜色的定义，我们勾勒出了一个条状的图形，我们在xhtml代码中style="width: 24%;"，定义了所设置的区域既大小。这样一个基本的条状图表就完成了！
　　我们看最终的运行效果：

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

不用javascript实现带序号的表格隔行换色的效果用javascript来控制链接的target 属性的代码

CSS样式表 中的 用CSS实现基本条状图表效果

评论 (0) All

CSS样式表中的用CSS实现基本条状图表效果