CSS教程:复合型条状图表

站长资源 2024/12/27 佚名

79 1538 79

DDR爱好者之家 Design By 杰米

英文原文：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样式设计是要用到的背景图片：

教程,网页,网页制作,图表,复合型,<,",dd,/dd>

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“CSS教程:复合型条状图表”

暂无评论...

CSS教程:复合型条状图表

CSS教程：了解熟悉css语法

CSS教程：CSS放入网页的几种方式

评论“CSS教程:复合型条状图表”

更新日志

友情链接