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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
' N% B6 e- c, U; U% N; M　　% c- l" v) i* y7 q. b
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
" k! o, M. o# a4 ]/ }0 r% e) H
$ d+ ?9 _( r$ e- J/ K　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
$ _6 o1 F$ N* N1 Q9 c/ x- A( Z
3 B" e9 d8 v' w' F) Q　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
$ c, o, y6 [/ J8 h3 {( q
$ \3 }8 m) q! e+ h" Q* g- V, i! ?" w　　 〈tr〉
) U4 ]2 a6 h  W$ e- N2 W1 d: x* \! w0 M2 V  `
　　 〈td〉
, g8 }0 i/ {. t& |/ F2 f& k6 J- |* E& b$ o! L) L; l
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉- g1 S  I0 a9 n" R5 p; e* h  _! _

5 G% M7 e: b6 B* H2 I) m　　 〈tr〉! H+ z  H8 a# b: l3 i( E6 K9 M0 p
8 A5 K3 z7 H2 b7 p/ |. c5 B2 P- E$ K
　　 〈td〉% u% V% ~" p+ w6 s( M

7 s2 o4 F- R% _0 E# l　　 〈/td〉! e9 X, [4 w4 ~* z1 f8 E5 {* l

4 H; r2 p) [* i( [, V2 H　　 〈/tr〉
6 @; p  |# M7 V# `" E
' v8 C  E" v: z% m, q　　 〈/table〉6 ~/ g- _) G$ k3 f) t% L

) g; W, f9 T+ H! Q2 Z- v7 f& V# V　　 〈/td〉9 x3 I# H( J9 N
# L! }4 ~, \4 [2 O
　　 〈/tr〉
3 Z1 `3 M. U3 ?' x" N
- Y2 x7 ?  J+ I9 B" e　　 〈/table〉9 ~, ?9 u; ^5 c% v

! k; P# A* c0 [; J" U　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
% J, T1 _" {5 r3 }9 X$ D8 r1 d/ |% u+ G# n9 T) Z& E: j
　　源代码如下：0 f9 _6 C0 I4 I/ T: W- a7 t' ~
% W! o3 I# C# K+ V
　　〈table border="0" bgcolor=white〉" w# J1 _4 ^0 U3 |: V7 X

3 {2 T2 b( k8 ]& V　　 〈tr〉6 }' g6 [& `( a4 f; _. H
1 w9 v6 y8 X, `
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
( l/ L2 Y3 J: Z' V3 W0 N
8 J/ N3 C( u" _. ?3 m) v　　 〈/td〉2 j- X; E; }, b" M; z7 J* h

, S$ H; q  M/ X3 a: h　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉" Y2 J. U' c: D5 i% I
+ C: e. ~7 t# z0 {* B3 W8 l' n
　　 〈/td〉8 l* M* f9 P6 ~% ~& ]
$ K0 q% K4 K7 e. X, l/ G  A
　　 〈/tr〉
( v/ n5 v; D% f; [& _4 @1 C  _/ P# e7 G! R# Y) J
　　 〈tr〉
& ]3 v6 @& G5 `; o$ q
. ]8 e3 y6 Q; \% h, A　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉' D$ v, h. c- K6 \8 z5 h
, d1 t( Q8 z6 a! B
　　 〈/td〉
. E" K8 X# }$ \1 ~. R5 ]1 x
% k+ @8 B. j$ ?( U　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉" s' f! J6 Z$ r' y" x& x
  w. s4 y. h5 `$ r' J: R1 S/ v( A
8 j8 |% @) m) J  W; k3 ?* X7 a
　　 〈/td〉" a- V; ^* y  t3 T- f# f

' [6 U0 M6 A& n. Q, p　　 〈/tr〉3 g2 V) h' N. f! @& M% V' x  s; @

6 `0 s/ e$ c8 c4 z2 d) t  x) Z　　〈/table〉

晴天再现

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