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

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理 ! ]0 `- E, O. @2 W% P- y" e1 @
　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。
5 G. i3 E7 t% n- I/ J4 n$ d$ Z, z# x$ v* Z1 ]( U% F- u6 e: b
　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。
! ^2 k3 ^" o2 D# d6 ?; n$ |0 f6 P1 S
　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。
  X1 L$ E  y  N' d4 _9 x' K5 P# C
　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。$ v. ^* j' a7 R
$ X# i% M$ R7 E, y" `6 f" t
　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。/ T, u! w+ S- {3 @- K) D/ y
6 c' B9 P  P. x0 V" @- q! l0 a( X) S! k
　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。
6 J: b: l8 a0 j! `; l/ E8 Z$ n) B4 i/ @. E
　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。9 n1 v$ H6 k5 `$ M0 `6 x8 X

1 f6 {6 _2 r0 [1 U; V　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。2 B* H0 l8 d) I$ I

7 T4 ]% L8 Z, N　　综上所述，为链接元素定义CSS样式属性的完整例子如：
1 x; Q8 ?6 G9 T  j/ y& o2 N7 A3 o; \2 \$ N
　　a {! m2 f5 c% F. g
　　　text-decoration: none; 0 a& {6 [* P  C# B
　　　background: url(underline.gif) repeat-x 100% 100%;
3 S# u6 h2 \; k　　　padding-bottom: 4px;8 C* o7 ]) Z& Y8 ]% Q
　　　white-space: nowrap;
1 W3 a4 e" x, z3 Q/ R1 X　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：
7 K: p' L, `8 i! c　　a {9 C) S8 p8 H  ?% P
　　　text-decoration: none;
) M* B  @6 J5 Q. }* d. Q( N: j! H　　　padding-bottom: 4px;- ]5 O1 |0 C* l4 t; L
　　　white-space: nowrap;
  t' |* t. o$ v& ^1 ?) t+ D6 R　　}
8 f# }, ]; }( I, n6 S　　a:hover {" Q1 x3 Y5 ?3 k# n! W- a  M
　　　background: url(underline.gif) repeat-x 100% 100%;
5 n1 N) @! X% \7 s" m　　}