上海花千坊

CSS

CSS教程:复合型条状图表

时间:2024-10-24 14:38:17 CSS 我要投稿
  • 相关推荐

关于CSS教程:复合型条状图表

  英文原文:CSS FOR BAR GRAPHS

 

  这是一种相对比较复杂的图表,但是仍然遵循上篇中提出的最基本的思路。本例中使用的定义列表标签dl可能平常我们见得不多,一般我们在做列表的时候通常只会用到ul和li标签,至于dl一般都很少用到,它也属于列表类的标签,下面说一下大概的用法:

  dl标记定义了一个定义列表,定义列表中的条目是通过使用dt标记(定义标题)和dd标记(定义描述)创建的。dt给出了术语名,dd标记给出了术语的定义信息。

  也就是说dt用来创建列表中的上层项目,dd用来创建列表中最下层项目,dt和dd都必须放在dl的起始和结束标签之间。来看一个例子:

  西米CC

  触手生春

  不可或缺

  无懈可击

  触手生春

  Html基础

  CSS入门

  应用实例

  在不进行任何样式设计的话,它的显示效果如下:

  在本例的CSS柱状图中,每个图标前都有相应的项目说明文字,我们把它放在dd标签中。dd中的内容就如基本的CSS柱状图原理一样,通过背景的设置来显示相应比例的效果。首先来看一下XHTML代码:

  Spring

  25%

  Ximicc

  55%

  Technique

  75%

  注意这里的strong标签,它并不是仅仅为了修饰文字,在后续步骤中它还有很重要的作用。理解了dl标签的用法之后,整个的XHTML结构看起来就不是很复杂了,最终出来的效果中将会有三条柱状图标,当然在运用的时候可以进行增减。下面是三张在CSS样式设计是要用到的背景图片: