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

admin

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 　　一、基本原理
6 d/ \" d2 X* I+ S: q: p% M0 W　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。
' \  u" m7 n; O& A% P
7 C+ R& }% }% Y1 k# J　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。
9 \. k/ y+ p" I4 [1 d+ K
2 i& A: T3 T2 L1 }2 ~　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。: F$ Z* \/ }4 C

( I# O/ @  K7 a- @& o) j　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。% V3 r5 O" d6 K* L0 T+ u

- h5 ?2 H) o' s" ^　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。
1 X) x% q/ c" D/ S. `4 M: C0 f4 ]8 i7 e8 W$ p
　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。0 M# ], p- ]9 q# U

6 E& Y' |* `0 \5 E9 i. l5 Y& [; H; P　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。
9 k4 V/ ^7 y# h9 b& B( F1 H
( C+ I/ |! C4 v　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。
8 P5 c* m: F+ E" Y4 D) e
! p- O5 D$ `. ^2 w　　综上所述，为链接元素定义CSS样式属性的完整例子如：
! S1 Z6 J. t( J, L5 x/ d
, }5 P: l& d& V2 \; N2 e% v( e3 [$ B* ]　　a {
: Q4 j! c9 l% P  B　　　text-decoration: none; 0 s5 r# S6 S6 o; Q  v
　　　background: url(underline.gif) repeat-x 100% 100%;+ i# b! E# f3 Y  E  V; o( w
　　　padding-bottom: 4px;% i& F3 F1 q" J: e- k8 N% m: }
　　　white-space: nowrap;& Y5 W0 @2 _; l
　　} 　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：
3 D9 G" }6 F2 R  P4 [0 R　　a {
- ?. e' W; k! Y5 Q5 i　　　text-decoration: none;
2 `8 U  H8 r8 K2 M" l1 ^　　　padding-bottom: 4px;4 q% o  |9 g% z' e
　　　white-space: nowrap;
1 N( G9 x1 `( u2 h$ R& \9 Z　　}
& k" {  _9 j: t# W- W; o7 R! Z　　a:hover {
9 O" Q1 j, ]  D6 n; f3 u1 x　　　background: url(underline.gif) repeat-x 100% 100%;  E- J6 H2 g9 H% u2 r
　　}