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

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理
( v0 \# E4 G1 w; \. H5 \/ m0 L　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。2 @( H. w$ \  Q- Y4 y* ?
. R  ]$ u+ R3 c
　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。4 t& S+ P* T  G: V) Q
6 @1 g+ P" x2 H+ E; C/ L: R
　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。
2 Y. U  `! v' e: r  |; W5 t. |+ b3 J3 y
+ Y1 j4 S) H4 X4 T5 D6 ?　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。8 _( S# ~  Z% T* H) b7 _" v/ C- B0 k
6 Z) P' N2 ~% ^" {: F6 e  Z  X9 j
　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。
8 h* G" m' q9 h+ f8 Y) B. N1 G! i1 W& a
　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。
' x0 K1 n0 v8 y" D. c9 A9 I; |* L" y0 w9 S" X2 W. i% F
　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。
- e+ m6 `3 R* `8 T; q& H) [
" V8 X0 b; h! `5 d; t　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。: _! V: o$ O1 x

! }& D! Q+ C" Z4 x! y+ L　　综上所述，为链接元素定义CSS样式属性的完整例子如：6 r6 o+ u/ u6 ?/ J9 M; s9 z
) K) R! _9 q# d7 w3 b( z1 W
　　a {4 M9 |( v$ u; u: r2 m
　　　text-decoration: none; 5 [8 y) g2 U  A3 ?
　　　background: url(underline.gif) repeat-x 100% 100%;8 a! P7 E) a  v5 j/ A  w+ I
　　　padding-bottom: 4px;) ]& G9 D% E; e; ?; }* K
　　　white-space: nowrap;5 f" N' h1 L- z% F
　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：( j7 U2 ~& v) G
　　a {
: X3 @# J- l& j3 U: O, N　　　text-decoration: none;
: m+ D. _- i' x　　　padding-bottom: 4px;
& n& B; l8 h- J7 w3 N. g6 y　　　white-space: nowrap;9 o. }: Y! a  M2 {& j( M4 m' g0 P% D
　　}
! @0 w' ?. Q) a4 y. H　　a:hover {7 U0 I' m5 P' b' a- J/ X7 Q
　　　background: url(underline.gif) repeat-x 100% 100%;
0 L) m( \' \3 t1 C9 n  w　　}