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

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理 ! V( l6 @; B% \( k* u
　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。$ {7 n2 p/ @% _: v: t
+ e+ |0 @9 j$ n' F" o+ w7 F9 U
　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。0 w' M6 k+ ]& @3 E$ v

5 i5 Y' L: D3 H: `$ m& G- e: H2 M% `　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。. e  L3 e4 k, i  ~9 ], Z

0 U* O" e$ |7 E　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。: L; O' G; s+ g1 j9 U
) d3 T3 a& u4 D: n; L
　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。
! l6 I% C$ d* z1 r
7 T" b. b+ ?2 {/ T" s　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。
" {* @$ O/ |. v# f; U7 @6 n/ T* q8 F. F% e% f5 T
　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。
/ d( f% D$ {- g" f6 `& K8 Y- N; F' H/ R3 J( K+ m, r
　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。- l' w( F) K/ b
7 v, N8 z# a* K. T6 T! U! D
　　综上所述，为链接元素定义CSS样式属性的完整例子如：# R+ r8 K( t3 p- T1 z% _
  w" u. _1 j1 y4 Y5 j5 w7 ~% m- U! b; t
　　a {
' ?( K2 z/ \+ n! w& E- R7 [+ i- J" T- p　　　text-decoration: none;
, a( R; c3 l7 \6 k7 t　　　background: url(underline.gif) repeat-x 100% 100%;
" r1 ^  ]( U+ i3 c! i　　　padding-bottom: 4px;  [9 D9 A* v$ C1 y$ j
　　　white-space: nowrap;
: v2 n# m# h# y: f4 B) A　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：4 h( ]" \* L% y- Y+ @
　　a {
/ y2 a" l' d( Y; X　　　text-decoration: none;
+ Q5 u, t, |7 G0 a) L! b( [* z# s　　　padding-bottom: 4px;. j% Q5 @: u' J2 k9 M) `! N" l
　　　white-space: nowrap;: \4 }( Z3 |5 Y; q
　　}2 V+ _) l; R/ U' @" v
　　a:hover {: e7 M& d+ D9 Q2 H/ W9 C2 D
　　　background: url(underline.gif) repeat-x 100% 100%;* ~$ x( e7 h- `% C
　　}