主题:链接取消下划线,望请高手指点几种妙法!
hnwtt [专家分:80] 发布于 2006-04-22 17:19:00
我是个新手,对下划线链接太不理想,望高手老师指点几种好的方法,有更好的效果。
回复列表 (共9个回复)
沙发
cljj920 [专家分:60] 发布于 2006-04-24 13:23:00
页面属性->连接 这里面可以去掉
板凳
panwei1984 [专家分:10] 发布于 2006-04-27 11:46:00
是不是说连接的下划线跟浏览器有关。那怎么才能使作出来得连接在任何一个浏览器上都不显示下划线呢?
3 楼
panwei1984 [专家分:10] 发布于 2006-04-27 11:49:00
我感觉应该从<a>标签入手,具体怎么做我也不会。请那位大侠出来说说
4 楼
一个人住 [专家分:3290] 发布于 2006-04-27 18:39:00
用CSS定义吧~~
5 楼
panwei1984 [专家分:10] 发布于 2006-04-28 09:14:00
楼上的老大能不能说说怎么写css.举个例子吧。谢谢
6 楼
一个人住 [专家分:3290] 发布于 2006-04-28 20:14:00
这是一个自定义下划线的例子:自定义的下划线 。是不是很酷呢?除了能
让你的网页呈现出一个与众不同的风格之外,它还能对于文档中不同的文字类型给与不同的视觉外观,起到提醒或者着重的作用。
首先,得先准备一幅作为下划线的图片。你可以利用先成的,也可以自己动手绘制。需要提醒注意的是,你所准备的图片应该适合水平方向上的重复,最好还能使透明的GIF格式,这样能够确保背景不被遮挡。
另外,如果你所准备的下划线图片在高度(粗细)上占用比较多的像素,那么,应当增加该行文本和下行文本之间的行距(line-height)空间,可以这么设定:
p { line-height: 1.5; }
接下来要做的事情是取消原来默认的下划线,这样我们才能把自定义的下划线应用到指定文本,使用如下的CSS设定(它的含义是让超链接文字没有任何修饰):
a { text-decoration: none; }
好了,现在可以来创建自定义的下划线了,这里,我们用准备的图片设定为超链接元素的背景图片,如下:
a { background-image: url(underline.gif); }
当然,文字的长度未必和原图的长度相等,这就需要考虑图片重复的问题,也就是说,应当把重复限定在水平方向的X轴上,可以如下设定:
a { background-repeat: repeat-x; }
还有个必须考虑的问题,就是字的大小改变怎么办?要让下划线的图片始终显示在超链接文字的下方,而不必理会文字大小的话,我们应当使用CSS中的背景位置(background-position)属性来定位图片位于超链接元素色底部。而对于如箭头这样的下划线图片,还得考虑超链接的文本边缘和图片边对齐。 下面的这个例子将下划线背景图片的位置限定在右下角:
a { background-position: 100% 100%; }
如何控制自定义的下划线图片和文字之间的空白呢?这个可以通过增加填充(padding)来做到。下划线图片相对于超链接文本基线(baseline)的确切位置以来与所用的字的大小。建议你一开始将底部填充(bottom-padding)的大小设定同下划线图片的高度相等,然后再慢慢调整到合适位置(下面这个CSS设定超链接的底部填充为4像素):
a { padding-bottom: 4px; }
因为下划线的图片被定位在超链接元素的底部,所以需要确保所用的超链接文本没有跨行,否则,只有处在最下面的超链接文本会出现自定义的下划线了。怎么解决呢,那就是阻止超链接文本跨行产生,可以通过CSS的white-space属性来完成:
a { white-space: nowrap; }
好了,把上面提到的这些超链接标记的CSS设定合并起来,结果如下:
a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}
还记得有些超链接文本没有下划线,但是当鼠标移到它的上面的时候,下划线就浮现出来的情况么?自定义的下划线也可以做到这个效果,那就在:hover上设定超链接背景,而不是在超链接标记a上设定,如下:
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
怎么样,是不是很简单呢?在来看看一些例子和它们对应的CSS设定:
静态下划线
a#example3a {
text-decoration: none;
background: url('/pic/200542191630940.gif') repeat-x 100% 100%;
}
7 楼
hnwtt [专家分:80] 发布于 2006-05-05 23:59:00
另外我还想问楼上的大侠,我用的是DW,为什么做好的网页在改变分辨率后浏览时,层与层间的相对位置发生了变化,网页成了一团糟。
8 楼
一个人住 [专家分:3290] 发布于 2006-05-06 14:12:00
层的位置是绝对的,所以你改变分辨率后浏览,网页就会变型,
你可以把层转换成表格,应该就可以了~~~!
修改->转换->
9 楼
大浪淘沙72520 [专家分:30] 发布于 2006-05-13 22:58:00
试试这个办法:在IE浏览器的属性中选择高级项,在下面的列表中找到“给链接加下划线“一栏,然后可以从中选择你想要的模式(3种)。确定后就可以了。
我来回复