5、 定制双划线效果。改变Border中的Style即可改变划线的外观,其中设定Style为Double,并设定Bottom为3pix即可实现双划线的效果。如图十七;
四、 高级链接样式
通过组合应用上面介绍的技术,我们还可以创作出更复杂的文字链接样式,下面我们介绍三个例子。
1、 定义块状链接。首先给链接增加一个背景色,如图十八;
再为文字链接增加四边框即可实现平面块状文字链接,如图十九;
2、 定义按钮状文字链接。改变边框的样式,定义Border-Style为outset,如图二十;
定义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行为,如图:
上一页 [1] [2] [3] [4] 下一页 |