标题:
自定多姿多彩的网页链接下划线
[打印本页]
作者:
admin
时间:
2008-1-19 23:20
标题:
自定多姿多彩的网页链接下划线
CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。
一、基本原理
' \1 u$ |( \1 g3 j4 ^
首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。
( [" I q: ~6 U+ l4 _- q
: W$ h0 c: a F' {/ T! j
其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。
; [% e0 h2 M( O6 {
2 q7 T* v' v, ^
第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。
' w! n' x" x+ k6 S0 X; k
1 [9 s3 O1 S% j' D3 L
第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。
( V, P, @: P7 \ Q( s% J
6 e4 A, G- `: V" N
第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。
% T% E0 S( z( x: v s) _/ m8 `
4 C! e# e9 x( k, b8 `. F2 F
第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position:100% 100%; }。
. z- d, V) N* H* M, b- T
; q# r# g* {4 u
第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。
5 u6 L7 x4 e' ?: K4 z
" K5 L. T ]/ t6 R) {. L
第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。
' E. E+ L% p0 ~* p
( h1 T: g% f" ?- [
综上所述，为链接元素定义CSS样式属性的完整例子如：
2 b3 j1 ~% J- H$ S8 C r9 @' C% u7 X
4 O1 ^1 i5 I0 R1 s0 T
a {
/ O$ `4 `% E( l% g
text-decoration: none;
8 J: G7 I! w( f! u, G$ `. k
background: url(underline.gif) repeat-x 100% 100%;
! ^7 v. f9 c% n# ~& C& P' l6 u' J
padding-bottom: 4px;
. Z! Q3 G x2 c2 X- ?2 S
white-space: nowrap;
, {# P+ i. \4 W6 T5 D
} 如果要
让自定义下划线只在鼠标停留时出现
，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：
7 B, O2 X1 W# {0 ^0 j
a {
4 G( L+ G) A0 M' J0 @
text-decoration: none;
( M4 x2 e. R2 ]7 t0 B
padding-bottom: 4px;
' m4 ?, C' o+ A6 m5 s6 j I7 l
white-space: nowrap;
8 j8 I6 M7 ]/ ]1 f5 G" }* N& h
}
+ E& k7 R, u9 d. m
a:hover {
. k4 y" y! j) ?$ ]
background: url(underline.gif) repeat-x 100% 100%;
4 a& r$ A. W& c3 L# m
}
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
