四、 高级链接样式。
通过组合应用上面介绍的技术，我们还可以创作出更复杂的文字链接样式，下面我们介绍三个例子。
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行为，如图：
我们可以把最后两种链接样式所需要用到的四张图片都预先载入，如下图： 
五、 总结
我就介绍这么多链接样式，配合设置链接文字的hover状态，可以实现非常漂亮的效果，具体的页面浏览请看这里，希望朋友们根据上面的思路，组合创造出更多地链接文字样式。记住，样式表就好比网页制作中具有宝藏的一个冰山，今天我们只是揭开了冰山小小的一个角落，更多的宝藏等着你去挖掘。朋友们有任何相关的问题可以到http://www.blueidea.com/bbs 提出和讨论。
相关视频
相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么
热门文章 没有查询到任何记录。
最新文章
CSS优雅的公布栏源码
高级CSS选择器的使用
将网站（主页）变成黑白DW设计网页时组织CSS的建议利用Dreamweaver合理优化网页元素布局22个Dreamweaver内置网页过渡特效简介
人气排行 如何用Dreamweaver制作电子相册下拉菜单全攻略-用Dreamweaver制作下拉菜单用Dreamweaver实现ASP数据库动态网站建设用Dreamweaver CS3制作下拉菜单如何在DW中插入Flash的参数详解Dreamweaver标签选择器的妙用巧用dreamweaver模板批量制作网页优化HTML代码加快网页速度
查看所有0条评论>>