|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
+ A5 k' h$ l3 Y8 @ w; Q 4 l- c" q* ?( Y& V, g: a, B3 r
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。. G6 K5 s' O. q- \" o& V" n
( ~. N2 P$ S% q7 b" a8 `; Q9 x 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
8 r8 X a0 s' |" l# ^7 F) ^* C( ]2 `) s( ^) j) _8 k q: D+ c$ A/ ^$ K
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉& C' Q4 S7 P- S" y- f5 w$ v
/ k( D5 ?" g: m I; O) _. D' ~4 T1 M
〈tr〉, ] u, K% _2 d' L# R6 U
( c) u( g! i+ O9 B/ q
〈td〉- _2 A- e& M+ [: b! V
7 ~" @" j4 W. H9 H2 R7 a B' W9 M n 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
6 y+ D1 N; D; a* \9 I
( q: g$ {/ G5 A) m 〈tr〉6 h# Y' V' w8 N% ]8 ?- `. c
+ U! i$ Q( D6 [0 e! F5 J% U 〈td〉
+ @& e7 j( u3 V1 D
( e. ^7 S4 \: |0 u 〈/td〉) s5 m' U4 m4 i1 q; J, u
i+ C: |6 ^# B/ n$ Z% k; D% L0 m 〈/tr〉
' r5 ]0 Y7 F( [) F2 X
4 G. O' S% N6 ]# }3 D 〈/table〉
2 y" C4 L, V4 e) c; G, ^) @) Q# N& ]& H: q" Y7 |) j1 v, n5 S
〈/td〉
5 D1 v) i. v! X9 x+ F! Z" \- v9 @1 t4 F5 P1 S% K! b
〈/tr〉- f' Q1 J) k5 b. ~
7 _0 ~* a' ^" O! p0 L9 c' k+ Y; [# Z3 ] 〈/table〉" n4 ]4 N( ]: k: r
0 w$ k7 `' @$ z1 t6 O
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
5 t, O/ t ~* d+ O7 O% ]' ^4 L0 I/ B8 e: I* q9 {0 P) f
源代码如下：5 y* U1 L! ^' t! }1 L2 m
. Z: K+ W8 |3 e7 V: ]* |" P2 ]' i
〈table border="0" bgcolor=white〉# |& n0 S( c, r2 @' C
) j3 a ` h* H# G7 i
〈tr〉1 _% ^# d+ C7 z- u' w
: D9 @) K3 d- Z( G w: |" A 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
/ m( Z4 Y1 u5 f1 q; v! B" }
* q' F2 C6 P3 N9 v+ }' s8 ~ 〈/td〉( u. Y. y2 f& _0 [8 D. F+ w1 I6 r
$ q6 U r I1 C! Q
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉- o6 S9 k1 f6 m0 \# J+ e
8 h2 W, l* a( g4 ] 〈/td〉
: m6 O I* w- p, k" t0 b% y
w% S6 p! U0 a1 I6 m& w 〈/tr〉
; e& ~7 ]4 f) x! _3 j
2 _" f4 E+ X3 v# r: L 〈tr〉4 i, G: q+ e$ U( V |- @4 c
" Z* C, b# }) O' } t( g7 Q8 o8 L 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉, O& J/ t+ S' q6 t5 p
. t# g' V6 t+ a
〈/td〉% b- L* Y+ f; [5 e! U
, h% E* n# [. a5 _ 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉" P- u! ~, a; p4 B8 p; j7 N3 b
, s/ v/ a4 ^, a. `) M% Z8 @( F9 B0 k( m8 ?
〈/td〉
5 U; Q7 x5 {5 D- G/ P7 b" v3 Q( p6 V% D L$ a" F
〈/tr〉' f3 u, A8 B' X' y7 W+ c0 G+ T
. N+ [4 m/ k* D: y. n7 e 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|