CSS教程:复合型条状图表

日期：2008年7月4日作者：查看:[大字体中字体小字体]

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

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

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

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

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

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

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

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

运行代码框
这个是第一列， 这个是第二列， 这个是新起一行的段落。
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

如果不使用浮动清除，那么第3个P里的文字就紧跟在第一、二个P显示在同一行，这个时候如果要达到预期中的效果，我们需要在第3个P的样式中加一个清除浮动：

运行代码框
[1] [2] [3] 下一页
CSS教程:复合型条状图表相关文章：
·[图文]五笔字根表图
·《拳皇2002》隐藏超杀出招表 - 技巧心得
·拳皇2002隐杀出招表 - 其他电子游戏秘籍
·Vi命令一览表
·[图文]五笔字根表
·幻世录2魔神战争完全物品列表 - 游戏攻略
·[宠物]宝宝天生技能列表
·轩辕剑3 炼妖壶、武器、装备及怪物炼化表
·AutoCAD 命令一览表
·网页颜色搭配表
CSS教程:复合型条状图表相关软件
·多特QQ表情包
·QQ搞笑表情gif动态图片集 V1.0 最新版
·洋葱头官方QQ表情+豪华增量QQ表情
·《实况足球9欧洲版》全系列注册表导入器
·QQ搞笑表情全集 V2.0
·ii标准视力表 V2.1
·工程表格算量 V3.7
·QQ2007全新系统默认QQ表情
·仙剑QQ表情
·Reg2000 注册表修改器和***密码查看器 V1.2 Build 125

上一篇:网页中照片预览导航设计技巧

下一篇:php教程：php设计模式介绍之注册模式

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

CSS教程:复合型条状图表

精品推荐

热点TOP10

特别推荐