【CSS写法】超链接样式_html/css_WEB-ITnose

php中文网
发布: 2016-06-21 09:47:30
原创
1854人浏览过

css a; 超链接

我们一般情况下写超链接时会用到,但是现在有个问题。描述如下:
1.当的中间是文字时,带下划线显示。
2.当的之间是图片时,不带下划线显示。

现在想通过CSS式样控制一下,大牛们有没有什么好的方法。

回复讨论(解决方案)

a{ text-decoration:underline;}
登录后复制

当中间是文字会有下划线,为图片时没有

我看着这意思是,想要在都没有下划线或者都有下划线的意思吧?

都不出下划线的情况:
设置:
text-decoration:none;

都有下划线的情况:
这个得用border进行模拟了;
设置:
text-decoration:none;
border-bottom:1px soldi #000;
padding-bottom:2px;//为了border的显示更清晰。

试试看,颜色,border的样式(也可以用图片的哦),padding的大小,都可以更改的。

我看着这意思是,想要在都没有下划线或者都有下划线的意思吧?

都不出下划线的情况:
设置:
text-decoration:none;

都有下划线的情况:
这个得用border进行模拟了;
设置:
text-decoration:none;
border-bottom:1px soldi #000;
padding-bottom:2px;//为了border的显示更清晰。

试试看,颜色,border的样式(也可以用图片的哦),padding的大小,都可以更改的。
谢谢回复,差不多是这个意思。你的这个方法我也试过了。正因为这样,中间如果是图片的时候,也是显示出来的。我现在是想如果是文字的时候,下划线显示。如果是图片的时候,下划线不显示。

我觉得如果是文字的话里面可以在链接里面加一个span了,然后控制span的css。可以设置为:text-decoration:underline;图像的话就用
text-decoration:none;
border-bottom:1px soldi #000;
padding-bottom:2px;

我晕,我试了下不会出现你说的情况啊

不做处理,图片都没有下划线的。

我刚看了下W3C对text-decoration的说明:
text-decoration 属性规定添加到文本的修饰。
这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。

这个属性只对文本有效啊?你是怎么出下划线的,能不能把代码贴出来给看看......

我晕,我试了下不会出现你说的情况啊

不做处理,图片都没有下划线的。

我刚看了下W3C对text-decoration的说明:
text-decoration 属性规定添加到文本的修饰。
这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。

这个属性只对文本有效啊?你是怎么出下划线的,能不能把代码贴出来给看看......

我的网站是在IE11下,超链接的文字底部会被切除一部分。所以采用了下面的方法,这个方法你也提出过:
text-decoration:none;
border-bottom:1px soldi #000;
padding-bottom:2px;//为了border的显示更清晰。

但是如果向上面这样设置的话,超链接是图片时下面就会有线。

我觉得如果是文字的话里面可以在链接里面加一个span了,然后控制span的css。可以设置为:text-decoration:underline;图像的话就用
text-decoration:none;
border-bottom:1px soldi #000;
padding-bottom:2px;

我现在做的是维护项目,所以页面都已经写好了。现在浏览器升级到IE11的时候,超链接出现了问题。
所以像你所说的改法,估计改动范围比较大。所以不太可行。

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号