CSS构造超链接

1. 超链接边框
2. 派生超链接
3. 属性选择器超链接
4. 动态超链接
5. 图像翻转超链接
6. CSS工具提示

   1.给链接加上边框

       A:link {

           Color: #f00;

           Text-decoration: none;

           Border-bottom: 1px dashed #333;

           Line-height: 150%;

   }

    

   2.在文章段落中加上超级链接

       A:link {

           Color: #f00;

           Text-decoration: none;

           Border: 1px solid #333;

           Background: #ccc;

           Padding: 2px;

           Line-height: 150%;

   }

    

   3. 用背景图象添加记号

       A:link {

           Color:#f00;

           Padding: 0 15px 0 0;

           Background:url(images/arrow.gif) no-repeat right center;

   }

   A:visited {

       Color:#999;

       Padding: 0 15px 0 0;

       Background:url(images/checkmark.gif) no-repeat right center;

   }

    

   4.利用派生来影响链接

       P a:link, p a:visited, p a:hover, p a:active {

           Color:#f00;

   }

   Ul a {

       Color:#000;

   }

    

   5.利用图片作为下划线

       A:link, a:visited {

           Color: #666;

           Text-decoration:none;

           Background: url(images/underline1.gif) repeat-x left bottom;

   }

   A:hover, a:active {

       Background:url(images/underline1-hover.gif);

   }

    

   6.突出显示不同类型的链接

       .external {

           Background:url(images/externalLink.gif) no-repeat right top;

           Padding-right: 10px;

   }

    

   7.使用属性选择器来做链接

   a[href^="http:"] {

           background:url(images/externalLink.gif) no-repeat right top;

           padding-right: 10px;

   }

   a[href^="mailto:"] {

           background:url(images/email.png) no-repeat right top;

           padding-right: 13px;

   }

    

   8.创建按钮和翻转

       a {

           Display: block;

           Width: 6em;

           Padding: 02.em;

           Line-height: 1.4;

           Background-color: #94b8e9;

           Border: 1px solid black;

           Color: #000;

           Text-decoration: none;

           Text-align: center;

   }

   a:hover {

       background-color: #369;

           color:#fff;

   }

    

   9.具有图象的翻转

           a {

           Display: block;

           Width: 200px;

           Height: 40px;

           Line-height: 40px;

           Background-color: #94b8e9;

           Color: #000;

           Text-decoration: none;

           Text-indent:50px;

           Background: #94b8ea url(images/button.gif) no-repeat left top;

   }

       A:hover {

           Background: #369 url(images/button_over.gif) no-repeat left top;

           Color: #fff;

   }

    

   10.以访问链接样式

   <ul>

   <li><a href="http://www.andybudd.com/">Andy Budd's Blogography</a></li>

   <li><a href="http://www.stuffandnonsense.co.uk/">Stuff and Nonsense</a></li>

   <li><a href="http://www.hicksdesign.co.uk/journal/">Hicks Design</a></li>

   <li><a href="http://www.clagnut.com/">Clagnut</a></li>

   <li><a href="http://www.htmldog.com/">HTML Dog</a></li>

   <li><a href="http://adactio.com/journal/">Adactio</a></li>

   <li><a href="http://www.allinthehead.com/">All In The Head</a></li>

   <li><a href="http://www.markboulton.co.uk/journal/">Mark Boulton</a></li>

   <li><a href="http://www.ian-lloyd.com/">Ian Lloyd</a></li>

   </ul>

    

   ul {

   list-style:none;

   }

   li {

   margin: 5px 0;

   }

   li a {

   display: block;

   width: 300px;

   height: 30px;

   line-height: 30px;

   color: #000;

   text-decoration: none;

   background: #94B8E9 url(images/visited.gif) no-repeat left top;

   text-indent: 10px;

   }

   li a:visited {

   background-position: right top;

   }

    

   11.纯css工具提示

       <p>

   <a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England.

   </p>

    

   1. tooltip {

      position: relative;

      }

   2. tooltip span {

      display: none;

      }

   3. tooltip:hover {

      font-size: 100%; /* Fixes bug in IE5.x/Win */

   }

   1. tooltip:hover span {

      display:block;

      position:absolute;

      top:1em;

      left:2em;

      padding: 0.2em 0.6em;

      border:1px solid #996633;

      background-color:#FFFF66;

      color:#000;

      }