|
|||||||||||||||
| | 网站首页 | 文章 | 图片 | 下载 | 资源下载 | 电脑 | 音乐 | AMD | 论坛 | | ||
|
||
|
|||||
| DW网页设计教程-多彩文字链接 | |||||
作者:佚名 文章来源:转帖 点击数: 更新时间:2007-7-27 ![]() |
|||||
|
效果说明 将鼠标置于文本上时,文本样式会发生改变,比如不会出现下划线,文字会闪动等。结合其他样式属性,还可以实现按钮式文字链接,效果如图所示。
创作构思 Text-decoration 属性用来控制超级链接,结合 Border-Style 属性,还可以实现更加复杂的样式。 操作步骤 步骤一初级链接样式 在 CSS 样式定义设置对话框中的“类型”子选项中有 5 种修饰类型。点选不同的修饰项,可以轻易设置不同的初级链接样式,如下图所示。下面以“无”下划线设置为例进行讲解,其他样式的设置跟本例类似。
( 1 )创建一个 CSS 样式表文件。按下 Shift+F11 键打开 CSS 样式面板,单击【新建样式】按钮,在弹出的【新建 CSS 样式】对话框中点选【高级( ID ,上下文选择器等)】选项,然后在选择器下拉菜单中选择【 a:link 】,单击【确定】按钮,如下图所示:
( 2 )编辑样式。保存样式表文件(文件名为 CSS.CSS )后,开始编辑样式。设定默认链接样式为无下划线,字体为宋体 12pt ,其他色彩等参数都不设置,如下图所示:
( 3 )新建并设置样式“ .t1 ”。再次单击【新建样式】按钮,在【新建 CSS 样式】对话框中点选【类(可应用于任何标签)】选项,定义自己的样式类,然后设置名称为“ .t1 ”(【名称】文本框是用来指定类的,用户可以根据需要任意填写,其格式是“ .* ”),最后点选【定义在 CSS.CSS 】,一切设置完毕后单击【确定】。接下来的设置跟第二步操作一样,然后单击【确定】,如下图所示:
( 4)立体四边框文字链接。在分类栏中选择“边框”,然后设置宽和高的值为 1px ,这样可以使链接文字与按钮四周有 1px 的间距,从而使四边框看起来有立体感,具体设置如下图所示:
( 5 )定义特效文字链接。 CSS 样式表中还包含了一组特效滤镜。这里创建一个使用 Blur 滤镜的文字链接,并且该链接还带有边框效果。在【过滤器】下拉菜单中选择【 Blur ( Add=?,Direction=?,Strength=? )】选项,然后更改滤镜参数设置为“ Blur ( Add=ture,Direction=45,Strength=1 )”,如下图所示:
( 6 )定义特效文字链接。 CSS 样式表中还包含了一组特效滤镜。这里创建一个使用 Blur 滤镜的文字链接,并且该链接还带有边框效果。在【过滤器】下拉菜单中选择【 Blur ( Add=?,Direction=?,Strength=? )】选项,然后更改滤镜参数设置为“ Blur ( Add=ture,Direction=45,Strength=1 )”,如下图所示:
|
|||||
| 文章录入:浅水游龙 责任编辑:浅水游龙 | |||||
| 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 | |||||
| 最新热点 | 最新推荐 | 相关文章 | ||
| 没有相关文章 |
| 网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!) |
| | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告 | 中国网址 | 管理登录 | | |||
|