DIV CSS 佈局教程網

如果某種你看到圖片中的下劃線鏈接請不要驚訝。因為它其實很簡單，你也可以做到。
來這裡看看實際效果 http://5key.net/demo/hyperlink-underline


首先，我們來說說這個彩色的下劃線是怎麼弄的。也許你已經猜到了，一張漸變的背景圖片。沒錯！就是下面這張圖片。

再看看下面的css，整個鏈接的變化效果我想你應該已經明白了吧。
如果不是太清楚。先來了解一下滑動門的概念 body {
  font-size:14px;
  font-family: Helvetica, sans-serif;
  padding:10px;
  margin:0px;
}
h1{margin:0; padding:0; font-size:16px; }
p{padding:20px 0 0 0;}
a{
  *padding-bottom:1px;
  text-decoration:none;
  }
a:link{
  color:#06F;
  background: url(1.gif);
  background-repeat: repeat-x;
  background-position: 0 16px;
}
a:visited{
  color:#06f;
  background-image: url(1.gif);
  background-repeat: repeat-x;
  background-position: 0 16px;
}
a:hover{
  color:#039;
  background:url(1.gif) repeat-x 0 bottom;
}