CSS教程:复合型条状图表

时间：2016-01-03 10:32:59 阅读：285 评论：0 收藏：0 [点我收藏+]

英文原文：CSS FOR BAR GRAPHS
翻译整理：西米CC-www.ximicc.com
技术分享

这是一种相对比较复杂的图表，但是仍然遵循上篇中提出的最基本的思路。本例中使用的定义列表标签dl可能平常我们见得不多，一般我们在做列表的时候通常只会用到ul和li标签,至于dl一般都很少用到，它也属于列表类的标签，下面说一下大概的用法：
dl标记定义了一个定义列表，定义列表中的条目是通过使用dt标记(定义标题)和dd标记(定义描述)创建的。dt给出了术语名，dd标记给出了术语的定义信息。
也就是说dt用来创建列表中的上层项目，dd用来创建列表中最下层项目，dt和dd都必须放在dl的起始和结束标签之间。来看一个例子：
<dl>
<dt>西米CC</dt>
<dd>触手生春</dd>
<dd>不可或缺</dd>
<dd>无懈可击</dd>
<dt>触手生春</dt>
<dd>Html基础</dd>
<dd>CSS入门</dd>
<dd>应用实例</dd>
</dl>
在不进行任何样式设计的话，它的显示效果如下：
技术分享

在本例的CSS柱状图中，每个图标前都有相应的项目说明文字，我们把它放在dd标签中。dd中的内容就如基本的CSS柱状图原理一样，通过背景的设置来显示相应比例的效果。首先来看一下XHTML代码：
<dl>
<dt>Spring</dt>
<dd>
<div style="width:25%;"><strong>25%</strong></div>
</dd>
<dt>Ximicc</dt>
<dd>
<div style="width:55%;"><strong>55%</strong></div>
</dd>
<dt>Technique</dt>
<dd>
<div style="width:75%;"><strong>75%</strong></div>
</dd>
</dl>
注意这里的strong标签，它并不是仅仅为了修饰文字，在后续步骤中它还有很重要的作用。理解了dl标签的用法之后，整个的XHTML结构看起来就不是很复杂了，最终出来的效果中将会有三条柱状图标，当然在运用的时候可以进行增减。下面是三张在CSS样式设计是要用到的背景图片：

在CSS样式中，dl部分只是简单的把内外边距设置为0，dd部分有一个clear属性需要特别注意。当某个元素的属性设置float浮动时，它所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float浮动，或者是希望浮动元素后面的内容不被其float浮动所影响，这个时候我们就需要设置clear来清除这种浮动关联。举个例子，假如文档中有下列内容：
运行代码框

<p style="float:left;width :200px;">这个是第一列，</p>

<p style="float:left;width :200px;">这个是第二列，</p>

<p >这个是新起一行的段落。</p>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
如果不使用浮动清除，那么第3个P里的文字就紧跟在第一、二个P显示在同一行，这个时候如果要达到预期中的效果，我们需要在第3个P的样式中加一个清除浮动：
运行代码框

<p style="float:left;width :200px;">这个是第1列，</p>

<p style="float:left;width :200px;">这个是第2列，</p>

<p style="clear:both;">这个是列的下面。</p>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
在本例中，如果dt不使用浮动清除，三个图表的内容就无法实现对齐，如图：
技术分享

dt和dd涉及到的其它样式都比较简单，主要是背景、宽高、浮动等属性，这里就不一一解释了。进度条效果的实现依靠背景覆盖来完成，因为两张背景图只是在色彩鲜明度上有所差异，使得最终的效果呈现出类似一个半透明图层覆盖在底部背景上，兼顾了视觉上的差异和融合。
指针的效果在strong标签中定义，来看看它的完整CSS：
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url(http://www.blueidea.com/articleimg/2008/07/5924/05.gif);
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}
里面所用到的背景就是指针图像，需要注意的是该图像的尺寸是24*9像素，所以这里有几个数值要进行精确的计算。首先因为一部分的指针图像要显示在dl区域之外，因此使用了absolute绝对定位方式；其次因为dl元素的高度我们设置成了20像素，所以指针的上、下溢出部分在高度上均为(24-20)/2即2像素，水平方向的溢出也同理参照指针的宽度9像素进行计算，根据这些数据最终计算出right和top的值。最后通过text-indent属性设置文本的缩进，目的是实现对文本的隐藏。
最后在CSS样式中还要加入一行Hack完善其在IE中的效果：
* html dd { float: none; }
运行代码框

<style>

dl {

margin: 0;

padding: 0;

}

dt {

position: relative; /* IE is dumb */

clear: both;

display: block;

float: left;

width: 104px;

height: 20px;

line-height: 20px;

margin-right: 17px;

font-size: .75em;

text-align: right;

}

dd {

position: relative; /* IE is dumb */

display: block;

float: left;

width: 197px;

height: 20px;

margin: 0 0 15px;

background: url("http://www.ximicc.com/attachments/month_0803/n20083922945.jpg");

}

* html dd { float: none; }

/* IE is dumb; Quick IE hack, apply favorite filter methods for

wider browser compatibility */

dd div {

position: relative;

background: url("http://www.ximicc.com/attachments/month_0803/e20083922951.jpg");

height: 20px;

text-align:right;

}

dd div strong {

position: absolute;

right: -5px;

top: -2px;

display: block;

background: url("http://www.ximicc.com/attachments/month_0803/b20083922100.gif");

height: 24px;

width: 9px;

text-align: left;

text-indent: -9999px;

overflow: hidden;

}

</style>

<dl>

<dt>Spring</dt>

<dd>

<div style="width:25%;"><strong>25%</strong></div>

</dd>

<dt>Ximicc</dt>

<dd>

<div style="width:55%;"><strong>55%</strong></div>

</dd>

<dt>Technique</dt>

<dd>

<div style="width:75%;"><strong>75%</strong></div>

</dd>

</dl>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

CSS教程:复合型条状图表

原文：http://www.jb51.net/css/6763.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)