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

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理 . F3 q" Y- X' f: l  k
　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。
! Z8 o! D- B1 c& s% f2 m7 Z7 S& t) H1 h  a+ _, j8 I
　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。6 c  U2 B$ l; y# W1 U: U1 P+ p3 U
: u5 ^' u8 x2 H' r
　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。6 Y2 Y; e6 _4 [% q
* v" {! U4 P3 S$ f2 V
　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。
* ^% R: p7 t  ^+ L: ~4 A( z! q6 L' x
　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。$ L/ E- g1 b, x+ L: ~% w( H
" {& `: a& W' u% Q+ A( |( @1 V2 r# R
　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。
* z* [2 m8 _8 I) Z+ W8 _- g4 L1 B. j3 X) X4 e# u
　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。
5 D% p# L" Y  Y* [+ h5 s0 `% w6 N2 G/ O5 P' m/ Z% h
　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。+ Z: J$ Z; I' z+ q* r* J  q

0 E0 ?6 H# C) _. Y6 J6 m7 u. @　　综上所述，为链接元素定义CSS样式属性的完整例子如：+ {9 |. U3 t. m8 m( n$ d0 L$ {
+ i# N" D2 W0 f2 ^+ \. D
　　a {
1 P8 I7 K- e0 n; e　　　text-decoration: none;
2 ]3 q; @6 {& N8 m7 O　　　background: url(underline.gif) repeat-x 100% 100%;
8 q5 S. @' j& Q. ]* h. ~5 \; u　　　padding-bottom: 4px;( Y7 W+ \8 }, S8 P$ Z
　　　white-space: nowrap;' n+ M# ^: d& v0 A3 G
　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：
: H, J5 h: [# a! k( b2 S. B　　a {6 u6 _, l1 Y# L$ i# K: [
　　　text-decoration: none;
, \, K3 N7 X+ i" t: r0 X2 R　　　padding-bottom: 4px;' u/ `% s0 J8 U, W6 M
　　　white-space: nowrap;: n4 m  q* {4 E9 p  ^! }
　　}: U" o3 J. u6 H  G( r
　　a:hover {
# g! L6 v8 c' J　　　background: url(underline.gif) repeat-x 100% 100%;$ a7 s2 ^! J/ C$ \; |
　　}