自定多姿多彩的网页链接下划线 页面美化, 链接

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理
2 u2 u7 b4 @% I　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。
* A2 i' F+ j7 d
7 [  j: [5 X2 k& N　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。
' e, u9 e0 [2 x) U$ \: J6 y# ^9 E/ S9 ^
　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。
( q9 S- v7 r. |  L" ~) r( F
4 y1 D- ]+ Z: k) x  d5 r! Q0 F　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。; x9 R8 Y; E1 e
  c, M7 J) E$ X8 M% b& r- e
　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。
  _) t( @  W- U1 x9 x: }1 O% _" i/ @" F: T0 u. F( [
　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。; J+ k  X+ }; c; C* ^4 c9 X& g
: c; p+ a1 B0 s' S: ^
　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。
/ a$ e/ y) O7 g
3 E( M6 E, M+ ]' }3 `5 g　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。4 Q1 z3 Y1 ?, [# y( U
) M# h  N$ |, {: J* s
　　综上所述，为链接元素定义CSS样式属性的完整例子如：
1 K0 `! a. F  u7 e; V3 P& _
3 J  g7 i) D4 E; s$ q0 b6 W6 Q　　a {5 I  l1 w' L) z6 `
　　　text-decoration: none; ; w7 H( q* C' |4 P
　　　background: url(underline.gif) repeat-x 100% 100%;
% J+ D2 l, S$ E　　　padding-bottom: 4px;
/ p9 J4 v. c" t1 e% j　　　white-space: nowrap;
& [; ?/ d2 q! _8 `9 m  c, k$ R　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：' Q) {9 o5 {, C) t6 g. D1 S) H& b2 u
　　a {
) w& X7 b; V2 k0 n$ {　　　text-decoration: none;5 j- p* v9 u: S! A8 z
　　　padding-bottom: 4px;& I  c8 }* `7 }$ P8 n2 C
　　　white-space: nowrap;5 J' D- C) A7 P; }& S  Y8 y% t
　　}
" Q" t6 a% l5 R' S5 v. M. e' m　　a:hover {
  I$ ^; S- J2 x  w" n$ D　　　background: url(underline.gif) repeat-x 100% 100%;. H' h0 s, z# Z" y; U/ c, q6 e2 I
　　}