CSS设计复合型条状图表
https://www.flypeng.com win10系统 发布时间:2015-08-29 00:00 来源:鹏鹏电脑知识网
  这是一种相对比较复杂的图表,我们先看一下效果截图:

\"点击图片打开新窗口浏览\"


  本例中使用的定义列表标签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>
        <p style="width:25%;"><strong>25%</strong></p>
    </dd>
    <dt>Ximicc</dt>
    <dd>
        <p style="width:55%;"><strong>55%</strong></p>
    </dd>
    <dt>Technique</dt>
    <dd>
        <p style="width:75%;"><strong>75%</strong></p>
    </dd>
</dl>


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

\"点击图片打开新窗口浏览\"


\"点击图片打开新窗口浏览\"


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

        


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

        


  在本例中,如果dt不使用浮动清除,三个图表的内容就无法实现对齐,如图:

\"点击图片打开新窗口浏览\"


  dt和dd涉及到的其它样式都比较简单,主要是背景、宽高、浮动等属性,这里就不一一解释了。进度条效果的实现依靠背景覆盖来完成,因为两张背景图只是在色彩鲜明度上有所差异,使得最终的效果呈现出类似一个半透明图层覆盖在底部背景上,兼顾了视觉上的差异和融合。

  指针的效果在strong标签中定义,来看看它的完整CSS:
dd p 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;}
 

  最终的代码:

        
如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到#qq.com(#替换为@)。期待你的好消息!