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

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理 3 s- q. b7 q0 V  T
　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。
$ T- w, l. K" |; Z% [) R  w, Q, {# M' x& _5 ~" a4 B/ R
　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。
- G: b. q: e/ W8 v7 w1 r0 G7 ?- ?0 U2 B
　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。
- ^  Z( I' \. }3 s! _
9 R) K5 h: B& }" i2 _6 x) [) k) k　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。9 \  J+ j  }& l- r# p

; [; \" s+ m9 t' g0 g( [　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。) p! p, F$ n( e) m4 b+ ]5 R
5 s$ k1 h: }$ K/ \( |
　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。
2 g' n& E- @7 u" g& s) p2 l8 Q6 {, z1 N* ~: D* j9 d8 T
　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。
6 V  U; g  c/ j& I3 R$ z4 H1 I8 g' e
5 c0 x& E5 J$ {　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。/ `; s1 o. Q0 ~7 J5 s
/ ^+ @. h% F7 X6 E
　　综上所述，为链接元素定义CSS样式属性的完整例子如：
/ ]2 c  @1 k7 ~# A5 `/ k
2 ~- I5 {" y5 @! z　　a {1 ^! g8 m. l& q# U  H+ D
　　　text-decoration: none;
0 g5 r% B* j- y+ m  o* T0 l　　　background: url(underline.gif) repeat-x 100% 100%;
7 l) W) T- i& }( S5 _: `　　　padding-bottom: 4px;6 _, J# q4 h% A! U: Q8 d) T
　　　white-space: nowrap;
" z, p  R! T+ l2 I7 H! N$ s* \* p% E　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：( m4 {! U9 F" ^. N# q7 G+ `) B9 H
　　a {- D3 P# ?1 I) A7 k5 U
　　　text-decoration: none;
, \; W6 `9 [. c$ C* h8 t& @　　　padding-bottom: 4px;8 C6 w2 u( p7 B& U/ P7 Y) F
　　　white-space: nowrap;
; q6 _7 D# e1 P( Y+ b& r1 B　　}
  U1 r9 s$ f" a3 ]- \　　a:hover {
+ A4 a2 `0 d2 q( \　　　background: url(underline.gif) repeat-x 100% 100%;
8 [2 l% Q' k9 O　　}