2024年1月23日发(作者：)
使用CSS去除 去掉超链接的下划线方法
2009年01月06日 星期二 14:46
我们可以用CSS语法来控制超链接的形式、颜色变化，为什么链接一定要使用下划线和颜色区分呢？ 其主要原因主要是考虑到 1、视力差的人 2、色盲的人 。。。
下面我们做一个这样的链接：未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色。
实现方法很简单，在源代码的
和之间加上如下的CSS语法控制：
其中：
a:link 指正常的未被访问过的链接；
a:active 指正在点的链接；
a:hover 指鼠标在链接上；
a:visited 指已经访问过的链接；
text-decoration是文字修饰效果的意思；
none参数表示超链接文字不显示下划线；
underline参数表示超链接的文字有下划线
-------------------------------------------------------------------------
演示：让网页中的链接去掉下划线
将代码插入在
之间.
之前即可 </p><p style="text-indent: 2em;";>------------------------------------------------------------------------- </p><p style="text-indent: 2em;";>使用CSS实现链接的虚线下划线普通下划线效果 </p><p style="text-indent: 2em;";>a { </p><p style="text-indent: 2em;";>color:#3399FF; </p><p style="text-indent: 2em;";>font-weight:Normal; /*CSS字体效果 普通 可以改成bold粗体 如果去除此行那么默认是不显示下划线的*/ </p><p style="text-indent: 2em;";>text-decoration:none; /*CSS下划线效果：无下划线*/ </p><p style="text-indent: 2em;";>} </p><p style="text-indent: 2em;";>a:hover { </p><p style="text-indent: 2em;";>color:#4499EE; </p><p style="text-indent: 2em;";>text-decoration:none; /*CSS下划线效果：无下划线*/ </p><p style="text-indent: 2em;";>border-bottom: 1px #0099CC dotted /*CSS加一个只有下边的框 边框为虚线*/ </p><p style="text-indent: 2em;";>} </p><p style="text-indent: 2em;";>a{ } ：是用来控制连接的效果 </p><p style="text-indent: 2em;";>a:hover{ }：是用来控制鼠标移上去的效果。 </p><p style="text-indent: 2em;";> </p><p><p><h2></h2></p></img></p></div></article></div><div class="fzithome-com info"><div><span>本文发布于:2024-01-23，感谢您对本站的认可！</span></div><div><span>本文链接:</span><a href="https://www.fzithome.com/xitong/1706016511a223434.html" title="使用CSS去除 去掉超链接的下划线方法">https://www.fzithome.com/xitong/1706016511a223434.html</a></div><div><span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div></div><span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="/tag/443.html" target="_blank">链接</a><a href="/tag/517.html" target="_blank">文字</a><a href="/tag/601.html" target="_blank">效果</a><a href="/tag/583.html" target="_blank">控制</a><a href="/tag/197.html" target="_blank">显示</a></span></div><div class="fzithome-com post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论
<span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4><form action="/comment/create/223434.html?safe_token=9ZxftU8B_2FyU2pJzUsFOQKrah5Ct7eRiHZFzcx8CiQUtsOUtksL5UqR9Lwqggox9BBf56sgi0sW_2BCs08xLTS6XA_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="fzithome-com tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5"></textarea></div></div><div class="fzithome-com psumbit"><input name="sumbit" type="submit" tabindex="6" value="发布" class="button" /></div></form></div><div class="fzithome-com commentlist"><div class="fzithome-com comment-tab"><div class="fzithome-com come-comt">评论列表<span id="comment_count">（有<span id="infocommentnumarea" style="color:#c81111">0</span>条评论）</span></div></div><ul class="diy-comment"></ul></div></div></div><div class="fzithome-com mainr"><div class="widget widget_previous"><h4 class="bar">最近发表</h4><ul><li><a href="/xitong/1700738253a67.html"title='DVE用户手册' aria-label='DVE用户手册'>DVE用户手册</a></li><li><a href="/xitong/1700739202a109.html"title='ArcGIS Engine中的8种数据访问' aria-label='ArcGIS Engine中的8种数据访问'>ArcGIS Engine中的8种数据访问</a></li><li><a href="/xitong/1700740619a170.html"title='酷卡软件二次开发接口文档' aria-label='酷卡软件二次开发接口文档'>酷卡软件二次开发接口文档</a></li><li><a href="/xitong/1700740726a176.html"title='如何根据GPS坐标生成面状图及面积计算' aria-label='如何根据GPS坐标生成面状图及面积计算'>如何根据GPS坐标生成面状图及面积计算</a></li><li><a href="/xitong/1700743577a303.html"title='access数据库压缩和修复语句' aria-label='access数据库压缩和修复语句'>access数据库压缩和修复语句</a></li><li><a href="/xitong/1700744608a354.html"title='杀软互相提示风险是国际惯例金山一直在提示卸载其它杀软' aria-label='杀软互相提示风险是国际惯例金山一直在提示卸载其它杀软'>杀软互相提示风险是国际惯例金山一直在提示卸载其它杀软</a></li><li><a href="/xitong/1700744627a355.html"title='win10中,广联达bim审图软件运行常见的问题' aria-label='win10中,广联达bim审图软件运行常见的问题'>win10中,广联达bim审图软件运行常见的问题</a></li><li><a href="/xitong/1700747806a513.html"title='抖音发布非遗数据报告,非遗如何在短视频平台大放异彩?案例精选' aria-label='抖音发布非遗数据报告,非遗如何在短视频平台大放异彩?案例精选'>抖音发布非遗数据报告,非遗如何在短视频平台大放异彩?案例精选</a></li><li><a href="/xitong/1700748225a535.html"title='如何搜索海外行业热点资料' aria-label='如何搜索海外行业热点资料'>如何搜索海外行业热点资料</a></li><li><a href="/xitong/1700749367a592.html"title='如何使用ChatGPT进行时事热点分析与讨论' aria-label='如何使用ChatGPT进行时事热点分析与讨论'>如何使用ChatGPT进行时事热点分析与讨论</a></li><li><a href="/xitong/1700753098a771.html"title='网络新闻' aria-label='网络新闻'>网络新闻</a></li><li><a href="/xitong/1700754085a822.html"title='聚焦重点“放大”新闻' aria-label='聚焦重点“放大”新闻'>聚焦重点“放大”新闻</a></li><li><a href="/xitong/1700759688a1088.html"title='Windows一键还原怎么用' aria-label='Windows一键还原怎么用'>Windows一键还原怎么用</a></li><li><a href="/xitong/1700759810a1094.html"title='安装联想电脑一键恢复及创建出厂恢复备份' aria-label='安装联想电脑一键恢复及创建出厂恢复备份'>安装联想电脑一键恢复及创建出厂恢复备份</a></li><li><a href="/xitong/1700759968a1103.html"title='windows7系统怎么一键还原' aria-label='windows7系统怎么一键还原'>windows7系统怎么一键还原</a></li><li><a href="/xitong/1700762194a1223.html"title='利用数据库备份与恢复策略预测系统恢复时间(五)' aria-label='利用数据库备份与恢复策略预测系统恢复时间(五)'>利用数据库备份与恢复策略预测系统恢复时间(五)</a></li><li><a href="/xitong/1700762284a1228.html"title='宏碁电脑怎么一键还原' aria-label='宏碁电脑怎么一键还原'>宏碁电脑怎么一键还原</a></li><li><a href="/xitong/1700764146a1332.html"title='在BIOS里设置cpu风扇转速智能调节的选项' aria-label='在BIOS里设置cpu风扇转速智能调节的选项'>在BIOS里设置cpu风扇转速智能调节的选项</a></li><li><a href="/xitong/1700767342a1513.html"title='电脑找不到序数什么原因导致' aria-label='电脑找不到序数什么原因导致'>电脑找不到序数什么原因导致</a></li><li><a href="/xitong/1700768189a1561.html"title='电脑cpu温度怎么设置' aria-label='电脑cpu温度怎么设置'>电脑cpu温度怎么设置</a></li></ul></div><section id="aside_about" class="widget widget_aside_about sb br mb"><div class="avatar"><img class="img" src="/view/template/mitiqin/img/tx.jpg"
alt="福州电脑网_福州电脑维修_福州电脑之家_福州iThome"/></div><div class="wrap pd"><p class="title">福州电脑网_福州电脑维修_福州电脑之家_福州iThome</p><p class="info">福州电脑维修网(fzithome.com)专业的电脑维修,笔记本维修,上门维修各种电脑,笔记本,平板等,快速上门.电脑知识频道内容覆盖:计算机资讯,电脑基础应用知识,各种电脑故障维修学习,电脑外设产品维修维护,病毒，软件,硬件,常识.</p><ul class="ul clearfix"></ul></div></section><div class="fzithome-com clear"></div><div class="fzithome-com widgets"><h4 class="bar">相关推荐</h4><div class="fzithome-com hot-post"><ul class="clearfix"><li><a href="/biancheng/1754508724a2600817.html"title='磁力链接介绍' aria-label='磁力链接介绍'><span class="sptit">磁力链接介绍</span></a></li><li><a href="/biancheng/1754550930a2607511.html"title='ChatGPT 加持 Python 写接口：SEO 效果飞升的秘诀' aria-label='ChatGPT 加持 Python 写接口：SEO 效果飞升的秘诀'><span class="sptit">ChatGPT 加持 Python 写接口：SEO 效果飞升的秘诀</span></a></li><li><a href="/biancheng/1754553842a2607883.html"title='chatgpt赋能python：Python如何捕捉屏幕上的文字' aria-label='chatgpt赋能python：Python如何捕捉屏幕上的文字'><span class="sptit">chatgpt赋能python：Python如何捕捉屏幕上的文字</span></a></li><li><a href="/biancheng/1754554548a2607969.html"title='chatgpt赋能python：Python滚动输出详解：如何实现动态的输出效果' aria-label='chatgpt赋能python：Python滚动输出详解：如何实现动态的输出效果'><span class="sptit">chatgpt赋能python：Python滚动输出详解：如何实现动态的输出效果</span></a></li><li><a href="/biancheng/1754589794a2613529.html"title='IOS之 点击链接跳转到App Store指定App(应用程序)' aria-label='IOS之 点击链接跳转到App Store指定App(应用程序)'><span class="sptit">IOS之 点击链接跳转到App Store指定App(应用程序)</span></a></li><li><a href="/biancheng/1754590837a2613693.html"title='Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案' aria-label='Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案'><span class="sptit">Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案</span></a></li><li><a href="/biancheng/1754640174a2623003.html"title='【免费下载】 Win11链接共享打印机错误0x00000709解决方案' aria-label='【免费下载】 Win11链接共享打印机错误0x00000709解决方案'><span class="sptit">【免费下载】 Win11链接共享打印机错误0x00000709解决方案</span></a></li><li><a href="/biancheng/1754641805a2623224.html"title='WTEditor（windows窗口标题栏文字修改工具）绿色单文件版V1.0 | windows窗口标题文字怎么修改？' aria-label='WTEditor（windows窗口标题栏文字修改工具）绿色单文件版V1.0 | windows窗口标题文字怎么修改？'><span class="sptit">WTEditor（windows窗口标题栏文字修改工具）绿色单文件版V1.0 | windows窗口标题文字怎么修改？</span></a></li><li><a href="/biancheng/1754670613a2627203.html"title='python提取网页链接_Python网络爬虫——把一个网页中所有的链接地址提取出来（去重）...' aria-label='python提取网页链接_Python网络爬虫——把一个网页中所有的链接地址提取出来（去重）...'><span class="sptit">python提取网页链接_Python网络爬虫——把一个网页中所有的链接地址提取出来（去重）...</span></a></li><li><a href="/biancheng/1754679116a2629202.html"title='黑苹果intel 9560无线网卡驱动_NUC8 安装黑苹果(Hackintosh)链接集合' aria-label='黑苹果intel 9560无线网卡驱动_NUC8 安装黑苹果(Hackintosh)链接集合'><span class="sptit">黑苹果intel 9560无线网卡驱动_NUC8 安装黑苹果(Hackintosh)链接集合</span></a></li><li><a href="/biancheng/1754689811a2631852.html"title='QQ音乐vip免费下载歌曲链接和全民k歌歌曲下载链接' aria-label='QQ音乐vip免费下载歌曲链接和全民k歌歌曲下载链接'><span class="sptit">QQ音乐vip免费下载歌曲链接和全民k歌歌曲下载链接</span></a></li><li><a href="/biancheng/1754690714a2632065.html"title='qq红包代码加群链接' aria-label='qq红包代码加群链接'><span class="sptit">qq红包代码加群链接</span></a></li><li><a href="/biancheng/1754704150a2635538.html"title='Windows10下美化字体，达到类似mac的效果' aria-label='Windows10下美化字体，达到类似mac的效果'><span class="sptit">Windows10下美化字体，达到类似mac的效果</span></a></li><li><a href="/biancheng/1754752487a2639600.html"title='表现效果集合' aria-label='表现效果集合'><span class="sptit">表现效果集合</span></a></li><li><a href="/biancheng/1754844082a2647985.html"title='JAVA——根据QQ群号得到idkey以及QQ群加群链接[网页版本]解决方案' aria-label='JAVA——根据QQ群号得到idkey以及QQ群加群链接[网页版本]解决方案'><span class="sptit">JAVA——根据QQ群号得到idkey以及QQ群加群链接[网页版本]解决方案</span></a></li><li><a href="/biancheng/1754844294a2648009.html"title='最全链接拦截申诉入口大全' aria-label='最全链接拦截申诉入口大全'><span class="sptit">最全链接拦截申诉入口大全</span></a></li><li><a href="/biancheng/1755024065a2659636.html"title='web后端 tcp建立基础连接 浏览器和客户端的链接 服务器和客户端的链接 tcp协议' aria-label='web后端 tcp建立基础连接 浏览器和客户端的链接 服务器和客户端的链接 tcp协议'><span class="sptit">web后端 tcp建立基础连接 浏览器和客户端的链接 服务器和客户端的链接 tcp协议</span></a></li><li><a href="/biancheng/1755025227a2659872.html"title='68种语言我爱你 手机版效果访问入口' aria-label='68种语言我爱你 手机版效果访问入口'><span class="sptit">68种语言我爱你 手机版效果访问入口</span></a></li><li><a href="/biancheng/1755037391a2662547.html"title='【photoshop CEP插件】 OCR文字识别' aria-label='【photoshop CEP插件】 OCR文字识别'><span class="sptit">【photoshop CEP插件】 OCR文字识别</span></a></li><li><a href="/biancheng/1755068613a2666974.html"title='windows10 20H2消费者企业版 2021年2月更新（附云盘链接）' aria-label='windows10 20H2消费者企业版 2021年2月更新（附云盘链接）'><span class="sptit">windows10 20H2消费者企业版 2021年2月更新（附云盘链接）</span></a></li></ul></div></div><div class="fzithome-com clear"></div><div class="widget widget_tags"><h4 class="bar">标签列表</h4><ul><li class="submenu"><a target="_blank" href="/tag/231620.html">联想开天N80z G2e 兆芯KX700032GB512GB集显</a></li><li class="submenu"><a target="_blank" href="/tag/231616.html">海尔S14 Pro 14英寸 8GB256GB固态参数报价</a></li><li class="submenu"><a target="_blank" href="/tag/231594.html">联想lenovoY400 Y400NIFI参数报价</a></li><li class="submenu"><a target="_blank" href="/tag/231590.html">惠普暗影精灵8 Pro i7 12700H16GB512GBRT</a></li><li class="submenu"><a target="_blank" href="/tag/231475.html">phpstorm配置debug踩坑</a></li><li class="submenu"><a target="_blank" href="/tag/231448.html">空间主题从空间解析转录组数据探索肿瘤空间结构的统计学习框架</a></li><li class="submenu"><a target="_blank" href="/tag/231445.html">小白从零开始AI驱动TDSQL</a></li><li class="submenu"><a target="_blank" href="/tag/231436.html">Modbus TCP vs EtherNetIP</a></li><li class="submenu"><a target="_blank" href="/tag/231422.html">安卓软件开发使用 Hilt 在 Jetpack Compose</a></li><li class="submenu"><a target="_blank" href="/tag/231420.html">Java23的新特性</a></li><li class="submenu"><a target="_blank" href="/tag/231419.html">Docker项目实战使用Docker部署Easy Countdo</a></li><li class="submenu"><a target="_blank" href="/tag/231417.html">HttpClientHandler 详解及使用</a></li><li class="submenu"><a target="_blank" href="/tag/231406.html">使用 iperfiperf3 进行 PC群晖Docker 的局域</a></li><li class="submenu"><a target="_blank" href="/tag/231369.html">Dcoker Compose 模板文件详解</a></li><li class="submenu"><a target="_blank" href="/tag/231346.html">python知识点100篇系列（15）</a></li><li class="submenu"><a target="_blank" href="/tag/231315.html">生成式AI如何彻底改变调试</a></li><li class="submenu"><a target="_blank" href="/tag/231289.html">与OpenAI CEO萨姆阿尔特曼对话AGI将在10年后到来</a></li><li class="submenu"><a target="_blank" href="/tag/231258.html">Foreground</a></li><li class="submenu"><a target="_blank" href="/tag/231230.html">ICCV</a></li><li class="submenu"><a target="_blank" href="/tag/231225.html">dont</a></li></ul></div><div class="fzithome-com clear"></div></div></div><footer id="footer"><div class="footer container-w cl"><div class="fnav"></div><span class="copy">
CopyRight © 2022 All Rights Reserved
<a href="/" title="福州电脑网_福州电脑维修_福州电脑之家_福州iThome" target="_blank">福州电脑网_福州电脑维修_福州电脑之家_福州iThome</a></span>
备案号：<a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-13</a></div></footer><script src="/view/template/mitiqin/js/common.min.js?2.3.0"></script><script src="/view/js/xiuno.js"></script><script src="/view/template/mitiqin/js/app.js?2.3.0"></script><div id="gotop"><div style="display: none; margin-bottom:5px;" id="goTopBtn"><a title="返回顶部" class="gotopa"><span class="iconfont icon-rocket-fill"></span></a></div></div></body></html>