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

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理
8 L6 D5 e) I  q: }3 a9 [' h　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。& e4 {' O. ]* h+ g' \7 c
+ j, d" K( P0 G7 `4 E1 G9 o
　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。
6 B5 T/ Q9 C  c$ u0 \* _2 v; {$ I. ]9 m
　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。
* t/ G+ m* s/ Z3 ^8 t- \  Y, k5 E6 k. @, Y4 }6 _
　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。
* {/ d0 L( k* R; ~) m# j0 a8 l; P' B+ N
　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。- O6 e- @0 S/ S9 ]* I  H7 W

; a* h/ v; n# o' @$ T' ]; f9 t　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。
* @6 j. |! S& X$ W  P
9 G6 [& u3 A; a, a  _& `( d7 j　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。
7 w* x2 w- D/ z* n' d; k; u- }
' \; z4 T2 z5 \( g5 D　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。
3 {4 |3 p% Z; J( E% z
, B+ t- O$ T( E$ f. w9 p1 g　　综上所述，为链接元素定义CSS样式属性的完整例子如：& F0 i$ Z& N( z* x3 O  c" b
! x/ B/ `! S  [1 A
　　a {
' \- w7 M! i, a& p1 O( r* x$ ~　　　text-decoration: none; 5 z- N8 g; h# T3 D
　　　background: url(underline.gif) repeat-x 100% 100%;. \% S& s1 Z$ Y" d5 W! T1 u5 b; a
　　　padding-bottom: 4px;
. J% a; |5 }" p8 Z# x8 G! V　　　white-space: nowrap;0 F1 x' k. [% a$ v( {9 R
　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：( l& g8 e; J& C: A0 Z! R
　　a {7 O% @. c( u8 F! N- d5 U2 B# t
　　　text-decoration: none;
% X& A; |: j3 S3 M　　　padding-bottom: 4px;
- A1 j' X/ I  T- U! X9 w3 k　　　white-space: nowrap;
- M# R( g) ?% n# j9 Z　　}
; A' G4 x8 Z, U" y# |7 G# K　　a:hover {
) {; s$ h9 P+ d* E% |　　　background: url(underline.gif) repeat-x 100% 100%;! h% s; s6 }/ v$ z4 {% {
　　}