我们可以用CSS语法来控制超链接的形式、颜色变化。
下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色。
实现方法很简单,在源代码的和之间加上如下的CSS语法控制:
其中:
a:link 指正常的未被访问过的链接;
a:active 指正在点的链接;
a:hover 指鼠标在链接上;
a:visited 指已经访问过的链接;
text-decoration是文字修饰效果的意思;
none参数表示超链接文字不显示下划线;
underline参数表示超链接的文字有下划线
adfadfas
class引用自定义类时,要直接用类名,就是.后面的部分,尽管我不知道用纯数字直接去定义会不会有bug,不过,用含有字母的字串去定义应该是个好的习惯。
定义的顺序是link,visited,active,hover,为了页面的美观,一般只用link和hover就可以了
在访问一个页面的时候,我们会发现,当鼠标移动到具有超级连接的文字上的时候,有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢?
我们在
...之间插入下面的代码。
更简单的方法是:
下面我们在看一看效果,试着将鼠标移动到下面的超级链接上去,是不是超级链接不会产生下划线了。
3、有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。如何实现这种效果呢?
可用层叠样式表(CSS)来实现的,在Dreamweaver3中编辑层叠样式表不用编写代码,具体操作方法如下:
1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示“show css styles”的那个按钮),在弹出的CSS Styles面板上双击(none);
2)此时,可看到弹出的Edit Style Sheet 面板,在该面板上按New按钮;
3)再在弹出的New Style 面板上点取Redefine HTML Tag(重新定义HTML标记)再在Tag中选择“a”(超级链接标记)标记后按OK按钮;
4)这时可看到弹出的Style dehinition for a 的对话框,在此对话框中可以设置超级链接的许多属性,你可以按你的意愿设置,但我们这里主要是要去掉那讨厌的下划线,所以我们在decoration 属性中选择“none”,这样就把下划线去掉了;然后我们再选择颜色为:#339966。按OK按钮返回到Edit Style Sheet 面板;
5)在Edit Style Sheet 面板上再按New按钮;
6)在弹出的New Style 面板上点取Use CSS Selector ,再在该面板上的selector选择框中选择“a:hover”(定义当鼠标在超级链接上时链接的属性),按OK按钮;
7)在弹出的Style dehinition for a:hover 的对话框中,我们在decoration 属性中选择“underline”,这样就把下划线又加上了;然后我们再选择颜色为:#FF3300。按OK按钮返回到Edit Style Sheet 面板;
8)在Edit Style Sheet 面板上再按Don按钮,至此所有设置结束,你在Dreamweaver3的源代码检视窗中将看到在与之间如下所示的代码:
有了这段代码,你在该网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。若你想在 其它网页中也具有这种效果,你可以用上述方法设置或更简单点,直接把这段代码复制,粘贴到与之间即 可。注意:若不是在a 中定义除去下划线而是在a: link中定义除去下划线,在实际使用时不能除去下划线,我是在IE4.0环境下测试的。