Dreamweaver打造多彩文字链接(3)

　　3、 定制下划线距离。此种划线的距离我们能够在Box分类中配置，只需改变Padding的数值，在本例中我们设定Padding—Bottom为5pix，如图十四；

　　4、 定制划线长度和对齐方式。更进一步我们还能够精确定义划线的长度和对齐方式，打开Box分类设定Width为200，如图十五；设定Block分类的Text Align为Center，即中间对齐，如图十六；

　　5、 定制双划线效果。改变Border中的Style即可改变划线的外观，其中设定Style为Double，并设定Bottom为3pix即可实现双划线的效果。如图十七；

　　四、 高级链接样式

　　通过组合应用上面介绍的技术，我们还能够创作出更复杂的文字链接样式，下面我们介绍三个例子。

　　1、 定义块状链接。首先给链接增加一个背景色，如图十八；

　　再为文字链接增加四边框即可实现平面块状文字链接，如图十九；

　　定义Box选项中的Width和Height能够定义按钮的宽和高，定义Padding为2pix能够使链接文字和按钮四周有2pix的间距，如图二十一；

　　3、 定义特效文字链接。CSS样式表中还包含了一组特效滤镜，我们能够再结合滤镜和前边的参数创建特别的链接样式。本例中我创建了一个使用Blur滤镜的文字链接，并带有边框效果。如图二十二；

　　4、 定义静态背景转换的效果。本例是通过对链接文字普通状态和Hover状态设定不同的背景图片来实现背景转换的效果。见下图：

　　5、 动态背景转换的效果。此效果和上例基本相同，只是在Hover状态定义了一个动态Gif图片背景。而且这个图片需要一点技巧就是设定循环为一遍，并在最后添加一个帧，设定帧的时间为一个较大的值，如10000。这样能够使动画执行一边后就停止。为改善效果执行时的速度，我们还需要在Dreamweaver中增加了一个Preload /doc/webpage/images/images行为。这需要打开行为面板，并添加Preload /doc/webpage/images/images行为，如图：

　　我们能够把最后两种链接样式所需要用到的四张图片都预先载入，如下图：

　　五、 总结

　　我就介绍这么多链接样式，配合配置链接文字的hover状态，能够实现很漂亮的效果，具体的页面浏览请看这里，希望朋友们根据上面的思路，组合创造出更多地链接文字样式。记住，样式表就好比网页制作中具备宝藏的一个冰山，今天我们只是揭开了冰山小小的一个角落，更多的宝藏等着您去挖掘。