使用CSS去除 去掉超链接的下划线方法

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

使用CSS去除去掉超链接的下划线方法

2009年01月06日星期二 14:46

我们可以用CSS语法来控制超链接的形式、颜色变化,为什么链接一定要使用下划线和颜色区分呢?其主要原因主要是考虑到 1、视力差的人 2、色盲的人。。。

下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色。

实现方法很简单,在源代码的和之间加上如下的CSS语法控制:

其中:

a:link 指正常的未被访问过的链接;

a:active 指正在点的链接;

a:hover 指鼠标在链接上;

a:visited 指已经访问过的链接;

text-decoration是文字修饰效果的意思;

none参数表示超链接文字不显示下划线;

underline参数表示超链接的文字有下划线

-------------------------------------------------------------------------

演示:让网页中的链接去掉下划线

将代码插入在之间.之前即可</p><p>-------------------------------------------------------------------------</p><p>使用CSS实现链接的虚线下划线\普通下划线效果</p><p>a {</p><p>color:#3399FF;</p><p>font-weight:Normal; /*CSS字体效果普通可以改成bold粗体如果去除此行那么默认是不显示下划线的*/</p><p>text-decoration:none; /*CSS下划线效果:无下划线*/</p><p>}</p><p>a:hover {</p><p>color:#4499EE;</p><p>text-decoration:none; /*CSS下划线效果:无下划线*/</p><p>border-bottom: 1px #0099CC dotted /*CSS加一个只有下边的框边框为虚线*/</p><p>}</p><p>a{ } :是用来控制连接的效果</p><p>a:hover{ }:是用来控制鼠标移上去的效果。</p> </div> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/023536546.html" target="_blank">word中如何清除超级链接的下划线 Word2003中超链接常用技巧</a></li> <li><a href="/doc/0e5375276.html" target="_blank">做链接方法</a></li> <li><a href="/doc/155461595.html" target="_blank">【免费下载】去除链接的下划线</a></li> <li><a href="/doc/204286534.html" target="_blank">超链接用法</a></li> <li><a href="/doc/363754449.html" target="_blank">ppt-2010设置超链接</a></li> <li><a href="/doc/348724474.html" target="_blank">超链接 练习题</a></li> <li><a href="/doc/3b17971300.html" target="_blank">ppt超链接文字不变色、不产生下划线的三种方式</a></li> <li><a href="/doc/458049438.html" target="_blank">超链接的基本概念.</a></li> <li><a href="/doc/5c532447.html" target="_blank">在Word中创建超链接有三种方法</a></li> <li><a href="/doc/5010454619.html" target="_blank">HTML超链接</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/0511768597.html" target="_blank">最新四川高考数学(理科)答案及解析</a></li> <li><a href="/doc/0611768598.html" target="_blank">区妇联工作总结及工作计划范本</a></li> <li><a href="/doc/0611768599.html" target="_blank">小学五年级优秀记事习作:学练跆拳道作文</a></li> <li><a href="/doc/0711768601.html" target="_blank">10 Kriston final</a></li> <li><a href="/doc/0811768603.html" target="_blank">各国万圣节的习俗</a></li> <li><a href="/doc/0811768604.html" target="_blank">人才梯队建设管理规定</a></li> <li><a href="/doc/0811768606.html" target="_blank">中国跨境电子商务出口的现状分析及建议</a></li> <li><a href="/doc/0c11768612.html" target="_blank">人教版长方体和正方体表面积ppt教学课件</a></li> <li><a href="/doc/0c11768613.html" target="_blank">1.1-同底数幂的乘法上课课件</a></li> <li><a href="/doc/0d11768614.html" target="_blank">2020年陕西省《中药学综合知识与技能》模拟卷(第214套)</a></li> </ul> </div> </div> <script> var did = "717366988"; var ext = 'doc'; var docId = '03sjqcraq4w0fjvk5wmu'; var totalPage = 2; const pageNum = '2'; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a>  ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br> 本站资源均为网友上传分享,本站仅负责收集和整理,有任何问题请在对应网页下方投诉通道反馈 </div> <script>foot()</script> </div> </body> </html>