在网页中实现细线边框的两种方法 页面美化, 边框

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
/ ]# E" y: l' ^' U5 R9 d( R　　
. l9 ?5 z" h0 h/ w# |　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。6 E: L9 V3 U; o" H" ]/ k+ W

8 j( E3 G- q6 h( g. u. M+ a$ V2 K; b　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：0 v# l/ G4 u  q6 J! V
; l) K: f3 N$ z3 c
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
1 Y5 P9 d2 G3 Z5 L7 R. D- U7 D$ h9 _" V$ W3 E; l
　　 〈tr〉6 L1 X: |! `* X+ m7 b+ F# P2 r
; U, Y$ ^9 i4 _
　　 〈td〉- U9 r$ I0 H4 P  y( `
5 t0 f: S4 C' w! i+ J2 g6 n' Z% b+ `
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉( Z: n- m' d) O1 n/ c, W- x1 p$ `

) f: F% }- K1 p, f; S　　 〈tr〉" h* q( u) z! c

! |7 Y! H8 D" V　　 〈td〉
5 H: y; U, l  f4 U! U/ \
1 Z; j2 O. L! D: L　　 〈/td〉: y# K% o9 E# K* z+ T' ^
; X2 {2 g' W9 z. D; c
　　 〈/tr〉% A8 e7 d+ n" `5 m/ C+ j
* h1 p& Y2 o( _7 n# A4 v& ~
　　 〈/table〉
) I" v: P! C/ J# F- \! `" H# L
. b/ f  G& D: n: x0 {. K　　 〈/td〉6 `- H2 E3 z' q& \4 b

+ F# I6 w8 m: L1 ~$ l( N% u　　 〈/tr〉
7 c9 \5 F  G3 L6 S# U+ t$ J9 l; M2 w( Y; ^) z
　　 〈/table〉, C* n; M6 T  p: ?; u( D' Y

4 [8 \: C& h6 v, ^" ~0 @　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。/ Z1 F3 A) [; a, a2 V- l; c1 z4 Z
& `" [1 L4 }) p* \* t
　　源代码如下：6 D" J. U  L- Z/ [' o
$ N* y9 _( k) u- |; g
　　〈table border="0" bgcolor=white〉
" C2 v: ?( l9 C2 w- Z8 U8 M
; Q! Y: B' h1 x1 |3 u6 u　　 〈tr〉( m. ^5 j4 R2 m- O0 T; j+ G+ o" `5 \
6 j& f! F- p4 F4 h- K# H, D; w" D2 p
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
7 F: y( Q8 z! z% U6 A0 z; }/ Q+ M9 R; A
　　 〈/td〉
' v) w& W9 _# n% S; @, h
3 |$ v& m4 i: L, H% d6 T　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉! m' T' ]( ?6 W! B  t# R
7 G% N* M* I8 o! d& _" c; |. Y
　　 〈/td〉2 N4 M# w6 d; i* M" A# @- D

' P9 l! I3 X+ o) U/ L　　 〈/tr〉
% C# x+ N2 E/ P0 H; K+ K
& u/ X: b) h3 @9 h- E. d　　 〈tr〉
; ~8 U7 O. F+ b6 h4 W
5 l' H! Z5 z8 q9 g, G: U, S. w% ?/ ^　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
) S7 V4 A3 O' [' J! }; i3 [/ z1 y' A+ F. Q
　　 〈/td〉( \0 a- _+ j1 Z( \5 o7 j
' g1 @8 l8 d8 u( }
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
$ R1 y' i( O6 y; c& x* m7 r$ D6 [7 V6 r9 L* @

1 h) f8 }6 S) W$ I8 b2 r　　 〈/td〉+ T- x+ K8 m- L1 f- N6 S( b5 Z

* ]4 q; t: B& ?8 @! c. c3 E　　 〈/tr〉" y, _; Z3 g+ Y# R
, p' v& O+ k/ F$ _7 Z/ f! {
　　〈/table〉