首页 相关文章 CSS教程:最基本的条状图表

CSS教程:最基本的条状图表

英文原文:CSS FOR BAR GRAPHS
翻译整理:西米CC-www.ximicc.com

译文已作精简,保留了与主题切实相关的部分,并对文中整段给出的代码进行分解注释,便于大家的阅读和理解。要查看英语原文请参看原文地址,关于本例的效果,原文作者已测试浏览器如下:Firefox 1.0.7, Firefox 1.5, IE 6, Safari 1.3.3, and Opera 9(TP1).

首先是最基本的条状图表,思路很简单,利用CSS中百分比宽度的弹性准确地描绘出一个百分比柱形图。

1.首先在页面中建立一个DIV容器并添加名称为graph样式,其间添加一组strong标签作为文本对象的容器,注意其中除了调用名为bar的样式之外,还直接利用行内样式设置了strong的宽度为84%:

div class="graph"
strong class="bar" style="width: 84%;"ximicc.com 84%/strong
/div

2.在.graph中,我们要定义最终效果中的外围边框样式,border属性的3个参数分别定义了边框的粗细、线性以...[ 查看全文 ]

2016-02-19 标签:

CSS教程:最基本的条状图表的相关文章

手机页面
收藏网站 回到头部