CSS教程之CSS教程:复合型条状图表
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。英文原文：CSSFORBARGRAPHS
翻译收拾：西米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>
<divstyle="width:25%;"><strong>25%</strong></div>
</dd>
<dt>Ximicc</dt>
<dd>
<divstyle="width:55%;"><strong>55%</strong></div>
</dd>
<dt>Technique</dt>
<dd>
<divstyle="width:75%;"><strong>75%</strong></div>
</dd>
</dl>
注重这里的strong标签，它并非仅仅为了润色笔墨，在后续步骤中它另有很主要的感化。了解了dl标签的用法以后，全部的XHTML布局看起来就不是很庞大了，终极出来的效果中将会有三条柱状图标，固然在使用的时分能够举行增减。上面是三张在CSS款式计划是要用到的背景图片：
在CSS款式中，dl部分只是复杂的把表里边距设置为0，dd部分有一个clear属性必要出格注重。当某个元素的属性设置float浮动时，它地点的物理地位已离开文档流了，可是年夜多时分我们但愿文档流能辨认float浮动，大概是但愿浮动元素前面的内容不被其float浮动所影响，这个时分我们就必要设置clear来扫除这类浮动联系关系。举个例子，假设文档中有以下内容：
运转代码框
<pstyle="float:left;width:200px;">这个是第一列，</p><pstyle="float:left;width:200px;">这个是第二列，</p><p>这个是新起一行的段落。</p>
假如不利用浮动扫除，那末第3个P里的笔墨就紧跟在第1、二个P显现在统一行，这个时分假如要到达预期中的效果，我们必要在第3个P的款式中加一个扫除浮动：
运转代码框
<pstyle="float:left;width:200px;">这个是第1列，</p><pstyle="float:left;width:200px;">这个是第2列，</p><pstyle="clear:both;">这个是列的上面。</p>
在本例中，假如dt不利用浮动扫除，三个图表的内容就没法完成对齐，如图：
dt和dd触及到的别的款式都对照复杂，次要是背景、宽高、浮动等属性，这里就纷歧一注释了。进度条效果的完成依托背景掩盖来完成，由于两张背景图只是在色采光显度上有所差别，使得终极的效果出现出相似一个半通明图层掩盖在底部背景上，分身了视觉上的差别和交融。
指针的效果在strong标签中界说，来看看它的完全CSS：
dddivstrong{
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中的效果：
*htmldd{float:none;}
运转代码框
<style>dl{margin:0;padding:0;}dt{position:relative;/*IEisdumb*/clear:both;display:block;float:left;width:104px;height:20px;line-height:20px;margin-right:17px;font-size:.75em;text-align:right;}dd{position:relative;/*IEisdumb*/display:block;float:left;width:197px;height:20px;margin:0015px;background:url("http://www.ximicc.com/attachments/month_0803/n20083922945.jpg");}*htmldd{float:none;}/*IEisdumb;QuickIEhack,applyfavoritefiltermethodsforwiderbrowsercompatibility*/dddiv{position:relative;background:url("http://www.ximicc.com/attachments/month_0803/e20083922951.jpg");height:20px;text-align:right;}dddivstrong{position:absolute;right:-5px;top:-2px;display:block;background:url("http://www.ximicc.com/attachments/month_0803/b20083922100.gif");height:24px;width:9px;text-align:left;text-indent:-9999px;overflow:hidden;}</style><dl><dt>Spring</dt><dd><divstyle="width:25%;"><strong>25%</strong></div></dd><dt>Ximicc</dt><dd><divstyle="width:55%;"><strong>55%</strong></div></dd><dt>Technique</dt><dd><divstyle="width:75%;"><strong>75%</strong></div></dd></dl>
大大缩减页面代码，提高页面浏览速度,缩减带宽成本; 由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 学Dreamweaver技术的过程其实是一个增加信心的过程。
页:
[1]