超级链接文本颜色和下划线的个性化设置方法及代码写法

1和2为修改文本链接颜色的方法
3和4为替换链接下划线的方法

1.使用标签属性修改文本链接颜色


    <body  link=teal alink=red vlink=silver>
     <h3>使用标签属性修改文本链接颜色</h3>
     <a href="后退.html">注意文本颜色前后变化</a>
     </body>

2.使用CSS属性修改文本链接颜色


     <html>
     <head>
     <title>使用CSS属性修改文本链接颜色</title>
     <style type=text/css>
            a {color:teal;
            text-decoration:none}
            a:visited {color:silver;
            text-decoration:none}
            a:hover {color:red;
            text-decoration:underline}
       </style>
       </head>
       <body>
       <h3>使用CSS属性修改文本链接颜色</h3>
       <a href="后退.html">注意文本颜色前后变化</a>
       </body>

3.使用“border-bottom”属性替换链接下划线


    <html>
     <head>
     <title>特殊的链接方式</title>
     <style type=text/css>
            a {
            text-decoration: none;
            border-bottom: 5px dotted red;
            }
     </style>
     </head>
     <body>
     <h3>点状的下划线
     <p><h3><a href="后退.html">使用“border-bottom”属性替换链接下划线</a>
     </body>
     </html>
       </html>

4.使用“padding-bottom”属性替换链接下划线


     <html>
     <head>
     <title>特殊的链接方式</title>
     <style type=text/css>
             a {
             text-decoration: none;
         padding-bottom: 15px;
         background: url(图片/手.png) bottom repeat-x;
             }
       </style>
       </head>
       <body>
       <h3>使用自定义图像的下划线
       <p><h3><a href="后退.html">使用“padding-bottom”属性替换链接下划线</a>
       </body>
       </html>

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.liangtzi.net/index.php/post/247.html