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=vJ80XGAAwun7DQcn19NsK02GaGPwx6QrxnIFyMskEOIqTP7pbaQFblqYjkRSyCrvPLuUjj07MAmY9tvaSdWvJQ_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/1700739121a105.html"title='文件后缀名大全' aria-label='文件后缀名大全'>文件后缀名大全</a></li><li><a href="/xitong/1700739471a122.html"title='Access数据库程序设计上机操作练习题2' aria-label='Access数据库程序设计上机操作练习题2'>Access数据库程序设计上机操作练习题2</a></li><li><a href="/xitong/1700739791a135.html"title='ACCESS数据库提示它已经被别的用户以独占方式打开或没有查看数据的权限' aria-label='ACCESS数据库提示它已经被别的用户以独占方式打开或没有查看数据的权限'>ACCESS数据库提示它已经被别的用户以独占方式打开或没有查看数据的权限</a></li><li><a href="/xitong/1700740888a184.html"title='(完整word)Access数据库使用方法和技巧' aria-label='(完整word)Access数据库使用方法和技巧'>(完整word)Access数据库使用方法和技巧</a></li><li><a href="/xitong/1700741567a216.html"title='ArcGIS矢量图层面积计算方法' aria-label='ArcGIS矢量图层面积计算方法'>ArcGIS矢量图层面积计算方法</a></li><li><a href="/xitong/1700741913a230.html"title='ASP连接access数据库的两种方法、如何读取数据库内容' aria-label='ASP连接access数据库的两种方法、如何读取数据库内容'>ASP连接access数据库的两种方法、如何读取数据库内容</a></li><li><a href="/xitong/1700743181a283.html"title='MMB常用脚本关键字' aria-label='MMB常用脚本关键字'>MMB常用脚本关键字</a></li><li><a href="/xitong/1700745791a412.html"title='win10如何彻底卸载软件不借助第三方软件删除软件残留注册表信息方法_百' aria-label='win10如何彻底卸载软件不借助第三方软件删除软件残留注册表信息方法_百'>win10如何彻底卸载软件不借助第三方软件删除软件残留注册表信息方法_百</a></li><li><a href="/xitong/1700746944a471.html"title='【AutoCAD卸载工具,完全彻底删除清理干净AutoCAD各种残留注册表和文件' aria-label='【AutoCAD卸载工具,完全彻底删除清理干净AutoCAD各种残留注册表和文件'>【AutoCAD卸载工具,完全彻底删除清理干净AutoCAD各种残留注册表和文件</a></li><li><a href="/xitong/1700747278a489.html"title='2011年公考申论热点:两手干部现象_公务员资讯网_公务员论坛公务员考试' aria-label='2011年公考申论热点:两手干部现象_公务员资讯网_公务员论坛公务员考试'>2011年公考申论热点:两手干部现象_公务员资讯网_公务员论坛公务员考试</a></li><li><a href="/xitong/1700748140a530.html"title='如何搞好热点新闻报道' aria-label='如何搞好热点新闻报道'>如何搞好热点新闻报道</a></li><li><a href="/xitong/1700752138a723.html"title='版面突出 聚焦热点 注重策划——解析京报网“主题新闻”的编辑特色' aria-label='版面突出 聚焦热点 注重策划——解析京报网“主题新闻”的编辑特色'>版面突出 聚焦热点 注重策划——解析京报网“主题新闻”的编辑特色</a></li><li><a href="/xitong/1700752170a724.html"title='TOSHIBA TC7S04F 说明书' aria-label='TOSHIBA TC7S04F 说明书'>TOSHIBA TC7S04F 说明书</a></li><li><a href="/xitong/1700754069a821.html"title='探索地方新闻发布与传播手段的新样式' aria-label='探索地方新闻发布与传播手段的新样式'>探索地方新闻发布与传播手段的新样式</a></li><li><a href="/xitong/1700760057a1108.html"title='联想一键恢复OKR8.0工程版出厂备份' aria-label='联想一键恢复OKR8.0工程版出厂备份'>联想一键恢复OKR8.0工程版出厂备份</a></li><li><a href="/xitong/1700760090a1109.html"title='如何备份电脑双系统' aria-label='如何备份电脑双系统'>如何备份电脑双系统</a></li><li><a href="/xitong/1700760909a1154.html"title='如何用diskgenius恢复数据(分享diskgenius数据恢复方法)' aria-label='如何用diskgenius恢复数据(分享diskgenius数据恢复方法)'>如何用diskgenius恢复数据(分享diskgenius数据恢复方法)</a></li><li><a href="/xitong/1700764130a1331.html"title='手把手教你cpu风扇转速多少正常' aria-label='手把手教你cpu风扇转速多少正常'>手把手教你cpu风扇转速多少正常</a></li><li><a href="/xitong/1700767289a1511.html"title='硬盘温度异常怎么办' aria-label='硬盘温度异常怎么办'>硬盘温度异常怎么办</a></li><li><a href="/xitong/1700768085a1556.html"title='显卡转速设置' aria-label='显卡转速设置'>显卡转速设置</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/1771398491a2685812.html"title='解锁Windows新功能:如何升级至专业版' aria-label='解锁Windows新功能:如何升级至专业版'><span class="sptit">解锁Windows新功能:如何升级至专业版</span></a></li><li><a href="/biancheng/1771528669a2687287.html"title='让HTTP图片在加密传输的HTTPS环境中也能正常加载的方法' aria-label='让HTTP图片在加密传输的HTTPS环境中也能正常加载的方法'><span class="sptit">让HTTP图片在加密传输的HTTPS环境中也能正常加载的方法</span></a></li><li><a href="/xitong/1771558570a2687632.html"title='移动办公新宠:如何利用手机让电脑听你的指挥' aria-label='移动办公新宠:如何利用手机让电脑听你的指挥'><span class="sptit">移动办公新宠:如何利用手机让电脑听你的指挥</span></a></li><li><a href="/biancheng/1771562310a2687675.html"title='告别C盘拥挤:系统内部文件大扫除技巧,释放空间、提升速度!' aria-label='告别C盘拥挤:系统内部文件大扫除技巧,释放空间、提升速度!'><span class="sptit">告别C盘拥挤:系统内部文件大扫除技巧,释放空间、提升速度!</span></a></li><li><a href="/xitong/1771743112a2689711.html"title='单机游戏发烧友福音:《使命14》、《尼尔5》、模拟游戏大集结,百度云独家资源等你来挖' aria-label='单机游戏发烧友福音:《使命14》、《尼尔5》、模拟游戏大集结,百度云独家资源等你来挖'><span class="sptit">单机游戏发烧友福音:《使命14》、《尼尔5》、模拟游戏大集结,百度云独家资源等你来挖</span></a></li><li><a href="/xitong/1772154430a2693383.html"title='从零开始,只花三步骤建立个人化AI助手环境-UI-TARS-desktop教学' aria-label='从零开始,只花三步骤建立个人化AI助手环境-UI-TARS-desktop教学'><span class="sptit">从零开始,只花三步骤建立个人化AI助手环境-UI-TARS-desktop教学</span></a></li><li><a href="/biancheng/1772163427a2693483.html"title='让你一目了然的IE收藏夹迁移攻略全解析' aria-label='让你一目了然的IE收藏夹迁移攻略全解析'><span class="sptit">让你一目了然的IE收藏夹迁移攻略全解析</span></a></li><li><a href="/biancheng/1772319986a2695241.html"title='CSS羽化攻略:快速提升网页设计的专业感' aria-label='CSS羽化攻略:快速提升网页设计的专业感'><span class="sptit">CSS羽化攻略:快速提升网页设计的专业感</span></a></li><li><a href="/xitong/1772333698a2695389.html"title='手把手教你:电脑远程控制,快速解决重装系统问题' aria-label='手把手教你:电脑远程控制,快速解决重装系统问题'><span class="sptit">手把手教你:电脑远程控制,快速解决重装系统问题</span></a></li><li><a href="/xitong/1772412960a2696305.html"title='Win11用户体验升级:关闭用户账户控制,畅享自由' aria-label='Win11用户体验升级:关闭用户账户控制,畅享自由'><span class="sptit">Win11用户体验升级:关闭用户账户控制,畅享自由</span></a></li><li><a href="/xitong/1772559952a2697357.html"title='玩转1300款PC游戏,大型单机游戏大合集,从使命14到尼尔5,应有尽有!' aria-label='玩转1300款PC游戏,大型单机游戏大合集,从使命14到尼尔5,应有尽有!'><span class="sptit">玩转1300款PC游戏,大型单机游戏大合集,从使命14到尼尔5,应有尽有!</span></a></li><li><a href="/xitong/1772630938a2698108.html"title='防火墙与SWF安全:Adobe Flash Player在网络安全中的角色' aria-label='防火墙与SWF安全:Adobe Flash Player在网络安全中的角色'><span class="sptit">防火墙与SWF安全:Adobe Flash Player在网络安全中的角色</span></a></li><li><a href="/biancheng/1772636959a2698174.html"title='2024年Android开发新潮流:自定义表情动画源码,玩转视觉特效!' aria-label='2024年Android开发新潮流:自定义表情动画源码,玩转视觉特效!'><span class="sptit">2024年Android开发新潮流:自定义表情动画源码,玩转视觉特效!</span></a></li><li><a href="/biancheng/1772638423a2698193.html"title='Android UI框架:制作九宫格分组菜单,解锁UI设计新技能!' aria-label='Android UI框架:制作九宫格分组菜单,解锁UI设计新技能!'><span class="sptit">Android UI框架:制作九宫格分组菜单,解锁UI设计新技能!</span></a></li><li><a href="/xitong/1772645553a2698267.html"title='MPU6050在GY521中的实战应用:如何让传感器技术助力创新' aria-label='MPU6050在GY521中的实战应用:如何让传感器技术助力创新'><span class="sptit">MPU6050在GY521中的实战应用:如何让传感器技术助力创新</span></a></li><li><a href="/biancheng/1773215093a2699096.html"title='新startpanel指南:揭秘隐藏与显示桌面上的计算机与回收站' aria-label='新startpanel指南:揭秘隐藏与显示桌面上的计算机与回收站'><span class="sptit">新startpanel指南:揭秘隐藏与显示桌面上的计算机与回收站</span></a></li><li><a href="/biancheng/1773562277a2702677.html"title='轻松管理,个性化设置:显示 Administrator 账号在欢迎屏幕上!' aria-label='轻松管理,个性化设置:显示 Administrator 账号在欢迎屏幕上!'><span class="sptit">轻松管理,个性化设置:显示 Administrator 账号在欢迎屏幕上!</span></a></li><li><a href="/xitong/1773623334a2703371.html"title='Mermaid让你的创意飞起来:从Mermaid入门到专业级绘图的进阶之路' aria-label='Mermaid让你的创意飞起来:从Mermaid入门到专业级绘图的进阶之路'><span class="sptit">Mermaid让你的创意飞起来:从Mermaid入门到专业级绘图的进阶之路</span></a></li><li><a href="/xitong/1774474221a2710662.html"title='了解Word中超链接后,你还能这样关闭文档,再快速定位到首页!' aria-label='了解Word中超链接后,你还能这样关闭文档,再快速定位到首页!'><span class="sptit">了解Word中超链接后,你还能这样关闭文档,再快速定位到首页!</span></a></li><li><a href="/biancheng/1774493748a2710883.html"title='一步到位,Win10上安装DirectX9.0,让Flash中心内容焕然一新!' aria-label='一步到位,Win10上安装DirectX9.0,让Flash中心内容焕然一新!'><span class="sptit">一步到位,Win10上安装DirectX9.0,让Flash中心内容焕然一新!</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/245073.html">卸载之前</a></li><li class="submenu"><a target="_blank" href="/tag/245064.html">者必读</a></li><li class="submenu"><a target="_blank" href="/tag/245062.html">配置环境</a></li><li class="submenu"><a target="_blank" href="/tag/245055.html">内核提权</a></li><li class="submenu"><a target="_blank" href="/tag/245053.html">更新体验</a></li><li class="submenu"><a target="_blank" href="/tag/245027.html">电脑上的</a></li><li class="submenu"><a target="_blank" href="/tag/245015.html">系统下如</a></li><li class="submenu"><a target="_blank" href="/tag/244991.html">实现跨设</a></li><li class="submenu"><a target="_blank" href="/tag/244971.html">走出困境</a></li><li class="submenu"><a target="_blank" href="/tag/244941.html">再困扰你</a></li><li class="submenu"><a target="_blank" href="/tag/244934.html">中心优化</a></li><li class="submenu"><a target="_blank" href="/tag/244884.html">共享模式</a></li><li class="submenu"><a target="_blank" href="/tag/244880.html">升级到开</a></li><li class="submenu"><a target="_blank" href="/tag/244829.html">窗体顶端</a></li><li class="submenu"><a target="_blank" href="/tag/244791.html">脑截屏快</a></li><li class="submenu"><a target="_blank" href="/tag/244780.html">定义在</a></li><li class="submenu"><a target="_blank" href="/tag/244705.html">脑连接不</a></li><li class="submenu"><a target="_blank" href="/tag/244691.html">这里注意</a></li><li class="submenu"><a target="_blank" href="/tag/244674.html">万网代理</a></li><li class="submenu"><a target="_blank" href="/tag/244639.html">允许当前</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>