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

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理 # o1 `1 J! v4 S
　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。; e4 `* P' v+ P5 [

3 h$ A1 C' |/ J$ |8 E+ a% N. S2 _& L　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。
9 W4 P: c# V# G3 `3 v# s8 F  X: n) E1 B
　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。
+ }4 a$ [& Z  S) [1 b
( Q4 I" _/ K$ D( j　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。
5 B# J+ T' B0 p3 U+ a$ \2 P' `5 g) B5 v# A6 L$ R& g- X
　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。+ m/ u0 ]) g& O: J: d

2 Y6 @6 N3 @# @$ p1 ^9 T9 Q　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。7 {! N) F5 h7 A1 B) d4 p

  i% j, W. {6 \7 r9 z$ t　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。
6 Y$ D4 S- `- m0 ^, Z" v8 X
) r! i7 D0 s" ~/ G0 q　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。
3 W, V* B* E! Z  A3 p( i/ m, H9 L( k6 z5 S: F  g& I
　　综上所述，为链接元素定义CSS样式属性的完整例子如：
4 u! D/ [# W' F# ~% f6 S8 t' A4 |; y+ v/ [: ?) A1 ^. [0 q
　　a {
& @5 h8 c+ n& y/ R, c! S　　　text-decoration: none;
; q5 P' ^" {& n% Z" J! O3 F　　　background: url(underline.gif) repeat-x 100% 100%;7 t0 x* y) T$ l& j6 R
　　　padding-bottom: 4px;
8 G" {: y* c: Q) F& [　　　white-space: nowrap;
4 I! Z. c: p, Q; @　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：# G9 d, l+ T! m5 o: X+ Q
　　a {
3 z, ?+ _, v( f; V' p# j5 a　　　text-decoration: none;
4 p7 z- Q, G: b" M8 N　　　padding-bottom: 4px;
: N1 ^* I& D4 x' q　　　white-space: nowrap;/ A6 n$ H. h$ o) v. `6 l& p: Z8 g
　　}
0 y. z+ C/ G4 R+ r　　a:hover {
) C" L; Y) h! s/ C, u0 b( z　　　background: url(underline.gif) repeat-x 100% 100%;& T: e+ R3 k; Y1 g6 S# B% {* ^/ S
　　}