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

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理   \8 S2 a( n5 o% Y! u8 C
　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。
0 ]' k! H7 I( x# O$ g' V
: S+ N7 A+ z" e8 J* G1 W　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。
' H2 o+ r! s9 C0 f1 ~
. F" @3 Z5 E- P( L* U4 x) d4 E　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。
4 I5 c: z8 ^; }6 b  i% ~# j) {0 `7 x3 Q: }2 t, c$ ?" m& k7 e
　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。
. d% C: I7 _8 w6 }: V! Q# S9 Z' w# b2 }' ]1 f. m' w3 t( l
　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。
  ^/ r& Q9 T7 |" I* J. g* B9 E$ R; O! Q! y9 ]9 |2 f  G+ d0 ?
　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。
4 h; K  P# Y1 L7 x7 n2 c; d# w1 r3 I
　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。" E% P4 O, Y2 l7 e1 G  Q7 ?( B! M
- k. t  f1 z+ v" Y: S
　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。% j2 Q3 d8 a* K

! H, K# N  R6 g9 m; A( r　　综上所述，为链接元素定义CSS样式属性的完整例子如：! {1 ~9 M1 f9 @2 ~

; R9 T+ F* C- I　　a {9 k9 F) s- e# l+ O1 S
　　　text-decoration: none; , b( r' _$ e( d! h
　　　background: url(underline.gif) repeat-x 100% 100%;
) N' n9 V0 v2 D5 @7 w　　　padding-bottom: 4px;
5 M! n  Y: E  Q! w　　　white-space: nowrap;5 R2 ~) F0 `; K- w
　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：
5 J* v+ M) M, U. ]" ?' |　　a {
. x- b$ L, C  U　　　text-decoration: none;
* G1 j9 E* `9 @6 B" E" Y  f　　　padding-bottom: 4px;. N8 {2 |1 H$ w; x; t( F
　　　white-space: nowrap;
2 F6 q7 Z5 b3 Y6 \% [　　}
" K5 P2 n# A" m( |1 P　　a:hover {2 Y5 h6 S8 i# P. ~. I( B7 z
　　　background: url(underline.gif) repeat-x 100% 100%;9 Q; R, ^( }7 S  w* Q5 z1 S2 }
　　}