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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
( V  Q$ H' b2 H! |　　
8 t' q, g4 i: ]　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
( K( P+ Y" ]4 B) C5 {% K4 J7 {7 ^8 z1 T% o8 l7 t/ o" b
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
: J) c& S% U+ i* K# K$ C# q
3 P5 W* C: G$ Q5 s, R; E8 g　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉& C% a$ ~$ U/ z- \. D+ S

3 R- v# o7 j$ M. N　　 〈tr〉
* c# E6 f, T9 ?: |
$ ~1 d# T% [8 W　　 〈td〉
6 U6 {* a- m" u
) e+ n4 r2 R6 u  I$ E　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
5 Y6 {' t! J7 p) [, c1 r: w1 a
- ]; G/ ~  k/ }) @; i$ w# i　　 〈tr〉
$ w( Z3 e' p0 B9 `  O4 g# g/ L5 `
　　 〈td〉
6 f% m% L1 ]3 s! g; t) d0 f" }1 t$ K( y" x$ R$ Y# T
　　 〈/td〉
; S7 ]  r. w5 u9 y5 n  H3 V& Z+ {% b: s0 o
　　 〈/tr〉7 Q& i, r% R5 i6 s& l) z

3 b% v+ X- Q  z4 L4 J, G" `　　 〈/table〉
7 V! @* A4 n. O7 [* a
8 E2 |# Q* Y) G　　 〈/td〉
/ [* X% z, C7 M2 |; N. q: s/ z; X; r. Y6 v. b  ~; ~2 s9 \# S
　　 〈/tr〉; F! S. V( `+ v% c: H  F
4 U- O- I) p3 }  x5 o
　　 〈/table〉- H& v2 f# G  m4 _/ K

4 J6 U1 @0 z1 y# {) {3 R　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
% U2 z% D8 _, B* F* ?" k
8 B7 L# p9 X! X; x　　源代码如下：
& E# W9 v2 X! R- o6 D  U: Y: W8 o3 j9 d
　　〈table border="0" bgcolor=white〉0 _0 b3 ~3 H: y; J9 Y( Q
* v; ]8 h7 K* T$ I6 k
　　 〈tr〉9 y( G& c0 G& S- ^4 s, V
9 `7 W0 O/ \5 H6 v* a
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉4 M9 ?6 ]4 Z& I! R. K

$ h! a- r* U$ ?　　 〈/td〉
1 s) Z6 v( u( r  J8 L! }0 [  _) f3 s' U6 e- J
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
: g+ b" z: `% B  g. N
7 C: |5 V# {6 z　　 〈/td〉
2 B! ]( z2 ?# E5 e# D) |( k8 r. }
6 W- i7 A" t, K( C- @　　 〈/tr〉" A  U# z' o2 M. \
: F. y% d: x& Z6 s* i+ o
　　 〈tr〉5 S7 Z0 |7 B! w/ ]3 I" d& x: X

  c; g( a5 A( j2 ^( K; ?$ ~7 I/ g　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
0 _" E3 }! [8 p* \0 ~! E+ w3 I1 ~9 e1 a3 \' C
　　 〈/td〉* e- @) _7 P* D. L) w
- ]2 C) K9 k! \( T( M6 X
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉. f) Z9 P$ V: A* @+ ]0 P6 P
* C  {* c% ]& F) b3 \' B$ n+ e8 n

3 W, q+ q* d5 m) y$ v1 C5 _, k　　 〈/td〉
  e' E" M1 D8 I* y7 E+ `, X" T0 h/ m& L
　　 〈/tr〉# U  B3 }7 v+ w8 e0 b6 Q
! [. k9 W4 p! ~+ n% F
　　〈/table〉

晴天再现

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