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

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理
7 b9 H4 k' u2 y, N" V6 d, ]% k7 _7 C　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。6 U% @' V/ Q+ m$ n& i
! G  W0 [& V& O+ S" p
　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。) m2 ~1 p( y  Z2 ?6 e+ o  \: L0 j
, b# A1 S' n7 x
　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。
2 T" w4 s+ c1 d: r" M% `" l8 _/ C
　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。% n5 ~9 a; i! O+ d  J7 O: x( h! {

8 b- ^4 T/ k% c4 I　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。
# o8 U3 a' @& u; M- p( B! c8 [  `% J; H- D) p
　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。
1 R( P2 G/ T. C. _& e1 h! |& F# p8 U; F  i- K  e
　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。1 M) i+ t+ m& G( b1 Y' j0 T

! g  }* R9 W# v# i8 k4 K　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。* u* }8 o. [: E/ Y6 s
' T6 a1 B, |% R
　　综上所述，为链接元素定义CSS样式属性的完整例子如：0 k9 i4 i$ L, S$ n/ x: c2 Q/ e
. I- k: P: J1 q- i% X' b8 X
　　a {( R9 Y: a5 r, X4 K& n6 f
　　　text-decoration: none; # s( \$ d( G9 [- a4 _. ?( H2 l
　　　background: url(underline.gif) repeat-x 100% 100%;8 y9 |, N, W5 t; D2 B7 u( J8 x$ `
　　　padding-bottom: 4px;
. g! e$ H8 |" S/ g　　　white-space: nowrap;
6 ]. D2 e- W& J8 Q# |3 r　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：
2 |  h$ d* B) a* P" B! x' G% M　　a {
9 s2 x* y4 `7 o2 n6 ?( G　　　text-decoration: none;
, G' m& T( ^; X　　　padding-bottom: 4px;
# h" z$ f' q7 y" @$ |, g　　　white-space: nowrap;
) E* Z: D- {) K$ t- E　　}* b% O1 @: e( H+ H# Z
　　a:hover {- y0 m0 c- ], w
　　　background: url(underline.gif) repeat-x 100% 100%;
. u8 Y5 S. ?5 O  ^　　}