CSS实例教程:最基础的条状图表

2021-03-16 14:37 jianzhan

英文原文: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个百分比柱形图。
1.最先在网页页面中创建1个DIV器皿并加上名字为graph款式,期间加上1组strong标识做为文字目标的器皿,留意在其中除启用名为bar的款式以外,还立即运用行内款式设定了strong的宽度为84%:
<div class="graph">
<strong class="bar" style="width: 84%;">ximicc.com 84%</strong>
</div>

2.在.graph中,大家要界定最后实际效果中的外围边框款式,border特性的3个主要参数各自界定了边框的粗细、线形和色调,在具体运用中要依据实际的网页页面设计风格开展改动。全部器皿的宽度设定为200px,并运用padding设定DIV的内边距,目地是以便让边框与以后的文本情况色造成间隔:
.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}

添加款式后的访问实际效果以下:

3.款式.bar中,最先将strong标识內容变换为块级元素,相互配合情况色调的设定开展功效。款式中除设置文本的色调、对齐方法及行高以外,最关键的是background特性,实际效果中的柱状条客观事实上便是这里设定的情况色,融合block显示信息方法最后获得优良的反映。
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}

大家能够运作下面的编码来查询最后的实际效果:
运作编码框

[Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作]