|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
3 c+ J4 m0 X& F/ T7 }0 q: \0 K
( o5 S# o1 z, V 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
9 _" h) I M% y$ r2 j
8 _! P7 h+ {4 t8 s 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：" b* F. O p% c, v+ J" u3 B, j p
/ h( T# r9 p: r6 y) O" P" V
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉 ^# z# G/ p3 i" x" O3 X" W0 _
) C* x) U; e0 m/ n
〈tr〉
( b, L& U! u* r6 j1 F
9 y5 y7 [9 A6 w# f" c. f 〈td〉
( _0 W! W' m$ S6 i
, Y* R5 y; p. X, k3 I7 ^ 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉0 m+ u* r: J( A1 F3 l
. {, q! ^- Z6 s \! @0 D
〈tr〉
4 i) k m0 S: Q" y$ a; ^# }! l3 y
〈td〉
/ C% O/ [- d X- N8 c6 T; t: B1 a1 K; T4 R+ g1 W, i s8 ]
〈/td〉
1 C1 n/ j' z5 ?' P2 J# }' D' e: q9 V
〈/tr〉
4 X. U( y' k$ n3 T4 `! Q
8 B( r( j; [5 f/ A+ C( U 〈/table〉
% i8 a# p/ c4 S( i$ p% i# |% L( S) A1 T, G
〈/td〉1 P, i, H } W5 R+ x
! ^! |& `$ g1 t
〈/tr〉" k7 n, V( p7 B- v! k9 T3 w3 G% N
6 a5 _; D t4 W; P# K3 D3 I4 O 〈/table〉2 q6 f. r1 d% n& H
9 X& A( k* J' b* W& X. R 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
9 ?1 Z3 @; H) \+ f9 A F0 l
w( X% Y- s d+ T4 }7 n 源代码如下：7 F8 }1 k( P9 a O G1 X
0 L; v, R. n- b: \* {" V. E 〈table border="0" bgcolor=white〉
. A1 B0 I" |0 H, i( p/ c4 U! g9 s: O. H# K" Y- O
〈tr〉
2 m" K% a. K" n- ^. P* E: l7 d1 X% m( J
^+ e5 I& b/ z# I 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉0 L3 K+ x, n3 [5 C; l% W
+ `, K' @+ p& f3 d, l 〈/td〉
: d8 H8 N! d4 s! M* U0 L* j2 w- U9 J+ ^% L; h, _ P z
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉' U* p6 _* b! O# Q
9 Y' L8 o% O6 @# z' h0 a0 O
〈/td〉/ O/ Z+ r+ ?) x& i: R1 Z
; n" j8 |6 k. A: o5 B m; g5 G 〈/tr〉4 {7 ~1 z' h/ C0 [' {
* \8 M4 z; y8 m' b: _. k# a" ] 〈tr〉
6 p1 G: Q- {! @6 m; a' X1 Q- ?, G/ J J5 X9 P
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉' I; ], ~# I# n# Y
& `: Y! V* N4 q5 ]- V- F" W
〈/td〉
! b; F% N& Z) v ~5 h+ l9 n k( X$ `, C
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
8 S4 M1 y% D. W3 }; m0 i( F7 q6 y. H" {0 I# Z
& }, o3 L8 X+ _3 i 〈/td〉2 |: e" n( v+ Y
4 M/ [" I# F; x+ O 〈/tr〉
, A: q: [% A7 p
- x4 E* n* }6 L- y 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|