当前页面位置 :大众IT学院:文章
Dreamweaver:鼠标移上链接出现下划线
作者:文文  出处:赛迪网独家特稿  发布时间:2003.10.27 09:51:33
有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。这种效果其实可以用层叠样式表(CSS)来实现,在Dreamweaver中编辑层叠样式表不用编写代码,具体操作方法如下:

(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按钮,至此所有设置结束,你在Dreamweaver的源代码检视窗中将看到在与之间如下所示的代码:

(责任编辑赵强


相关文章
·用Dreamweaver测试不同分辨率下的效果(2003.10.24)
·Dreamweaver技巧:科学调用style(2003.10.23)
·Dreamweaver技巧之两个术语详解(2003.10.22)
·Dreamweaver技巧之用TracingImage定位元素位置(2003.10.22)
·Dreamweaver技巧之去掉图片和表格接触的空隙(2003.10.21)
·Dreamweaver技巧之利用书签制作跳转链接(2003.10.21)
·Dreamweaver技巧之轻松制作下载文件(2003.10.20)
·Dreamweaver技巧之制作类似下拉菜单的效果(2003.10.20)
·Dreamweaver技巧之制作鼠标移上去后有变化的动态菜单(2003.10.17)
·Dreamweaver技巧之去掉超链接文字下划线(2003.10.17)
狗扑乱炖热贴