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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。7 Y7 w8 d  u% O' _- b6 C: k
　　) m$ d0 U3 f. T. }7 [4 ~+ }
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。4 Y4 h9 u4 }3 c$ B. X4 R
. ^( f* m. e4 g3 c1 F, h" g
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
! S8 }3 g7 U* h' }: B% f: K  p/ X6 U7 t/ `7 P) k
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
" C, T& D$ p" ]4 ?0 h, G7 L  W& A: L! i$ l. M8 w
　　 〈tr〉
! H: ?/ C  ^/ y7 B  f+ U# k) w+ U& V" x0 @& E
　　 〈td〉
3 p  q5 k1 x. y& o' Z6 @& V4 e" B9 k6 s5 z) q7 |
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
+ {; o2 ~+ h# U& V! M' Z$ Q8 S! E* x8 T: }( F
　　 〈tr〉5 F+ Y5 o4 N& M  b) U! a; ], P" E

5 P' S2 a* d" T. G　　 〈td〉0 c$ B/ p8 T8 D, n1 R
8 v/ f, c2 F& O  {5 ]0 g4 ^* S3 O
　　 〈/td〉
: K. F/ `6 h+ o3 Z4 B$ |0 q& u8 g$ H, {9 w
　　 〈/tr〉. t. o, V8 m0 [. X' M4 K
, P- T2 |. z8 I& ~  p# |3 ?+ N
　　 〈/table〉' q9 V7 T6 m4 v' x9 z6 {% ^$ H
4 ?$ M' u  m5 q$ V4 ~
　　 〈/td〉
+ g$ M+ b& [6 f' |# i" r+ o% C6 A
2 O$ a7 k8 Y2 j& J3 c9 k　　 〈/tr〉
0 E6 Z( k$ ^4 }9 l  b; k- X# J5 o2 S+ I/ t: z
　　 〈/table〉6 A: j: o+ }! i2 U0 ?6 u

: r) f: v* H# g( T  I　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
4 i: ?" Q+ Y. V$ L2 K! g" h+ i
4 G: N$ d8 A8 x. q* e3 w9 N　　源代码如下：  U& U" w3 a6 L4 H0 ?

9 X4 N& q+ I3 k& Z. M9 _) U$ c9 o5 q　　〈table border="0" bgcolor=white〉  M; W/ G. p' w8 k" v4 a
: `+ i* m8 ?% e& Q9 s; _
　　 〈tr〉
% t, ]* K; ?# h+ M
; u9 y+ }& l! j- j　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
6 |$ x5 w, t3 O' y) b2 N
) n% f; }8 N7 _　　 〈/td〉
- c. B- D( ^9 M% L9 `
: ^6 Y. z0 P. v- j　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉5 |: Q' F- F$ l1 v% O3 ]# o
- R6 P9 A1 a" J7 n. I
　　 〈/td〉4 B& q$ M' E6 o0 I7 N7 b; p7 p
8 v1 U0 k5 O0 \# x+ ]
　　 〈/tr〉
) M; n9 W$ |. L6 f4 I& p. D3 T
; C8 k" y# |& w. p' W0 L4 f$ X　　 〈tr〉
5 P  N( @' x) h8 k
5 ?* v  v; o/ r6 G/ [  }　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
3 B: h' E& |- z' E0 f
! J3 H& ^- K/ i% }: j; J& e　　 〈/td〉
9 p" n4 d7 N6 d$ d# c* S9 \! X' Z  G* s, H9 H8 K' H: D
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉: I5 R- G3 x. y! Y+ f& }+ |* L0 Q

0 T  B( N# m+ X/ ]0 a
4 G% G0 J" T" E　　 〈/td〉% W! [! B) H5 g8 m* g

8 s1 H! I% H3 m: I　　 〈/tr〉' c0 a7 P0 l& @) g
: C5 n  _  g# h& r) `
　　〈/table〉

晴天再现

挺好的。。。。。。。。。。