CSS实例教程:复合型型条状图表

2021-03-16 16:23 jianzhan

英文原文:CSS FOR BAR GRAPHS
汉语翻译梳理:西米CC-www.ximicc.com

这是1种相对性较为繁杂的图表,可是依然遵照上篇中提出的最基础的思路。本例中应用的界定目录标识dl将会平时大家见得很少,1般大家在做目录的情况下一般只会用到ul和li标识,至于dl1般都非常少用到,它也属于目录类的标识,下面说1下大约的用法:
dl标识界定了1个界定目录,界定目录中的条目是根据应用dt标识(界定题目)和dd标识(界定叙述)建立的。dt得出了术语名,dd标识得出了术语的界定信息内容。
也便是说dt用来建立目录中的顶层新项目,dd用来建立目录中最下层新项目,dt和dd都务必放在dl的起止和完毕标识之间。看来1个事例:
<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柱状图基本原理1样,根据情况的设定来显示信息相应占比的实际效果。最先看来1下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构造看起来就并不是很繁杂了,最后出来的实际效果中可能有3条柱状标志,自然在应用的情况下能够开展增减。下面是3张在CSS款式设计方案是要用到的情况照片:


上1页12 下1页 阅读文章全文