|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。 一、基本原理 3 C9 w8 b! W+ C
首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。- y' W* a8 l( n& [# C: v! _5 }
/ a" Y- E, H" F# u+ a/ j9 N# V 其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。' v* U; w! x8 c0 q! m9 k# u7 J/ R
( n' ~" Z4 e* m! z 第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。4 k1 F x/ C6 Y7 @/ C* u* r/ c
& O. ^6 T, K* a4 \" z 第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。; E; z# h% ]8 G2 y
2 K4 ^7 @ F1 T 第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。& D$ M- }* k2 p4 o4 V) P
" w5 n$ P' R% ? 第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。
Q- U# m" o0 J0 p9 o. w5 [) M) r* W2 ]- v- ~2 h
第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。
4 W7 U. M, u! S$ w, n& l) n5 ?+ g$ n6 K9 W- @+ U7 K" F
第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。6 ?. O! r/ l, d% f+ S6 E+ ]
7 {9 }6 u, z, C1 _% H& V4 I 综上所述，为链接元素定义CSS样式属性的完整例子如：
- ^3 b- U4 i& m7 [0 p) e) r+ k4 `
" e& y$ e9 m4 }7 d a {5 K: G' I& `. z& K8 B: q8 r
text-decoration: none;
o6 U1 z" \! ]& L0 n* ~ background: url(underline.gif) repeat-x 100% 100%;# a& t) k$ s8 [1 M6 H7 _
padding-bottom: 4px;- b0 U, n1 w3 _
white-space: nowrap;4 M$ p0 {, B9 g0 d- l
} 如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：# ^! L5 o& U3 j. T; }/ M
a {
# ]& O0 k; z3 P/ S6 v( m& _ text-decoration: none;
3 e1 q6 w8 {* }! D! S- q padding-bottom: 4px;8 U. n, O9 O8 `/ ?4 \! p' E$ v" B% f
white-space: nowrap;
$ P u( E' Q |; ]1 k' t }5 j9 k+ ~0 u! }3 Z) [
a:hover {
0 n: [$ G; `+ O% f- U5 u background: url(underline.gif) repeat-x 100% 100%;
, J: u0 r; Z4 [0 f8 f! P! ` } |
|
发表于 2008-1-19 23:20
| 