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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
' W& f5 a8 g+ G* J5 Z8 N　　
' p6 u5 L  P% R. `" o$ y+ N, |! Q　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
$ D9 p5 l7 W( }: c. L: N: F; ^9 H
# K+ Q) M' U+ M; y& z& \8 ]! O　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：9 }+ j) K: I' l
1 e% F9 _7 D4 d. v
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
( J) Z, B; V3 f# y& ?  O- ~
  _( f$ G; `9 L+ t& k& l　　 〈tr〉) E1 E$ @2 ], ^8 L2 [

3 J' r: o' r1 _) |. h) |　　 〈td〉
: P. p0 L2 t* f! N
, s& n9 H* n  W　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
. ]2 U1 l6 o+ Z& f  h" S( e
2 R7 D. {* g0 o) H, U- y　　 〈tr〉
; a& Y7 W" t% t. E( b) Q2 f6 v8 t8 Y4 S& X# q+ X3 y# q( s
　　 〈td〉
/ y9 P' X% ^+ _2 q/ N% G& m5 W8 U0 T. M5 E) l4 ~9 @. \
　　 〈/td〉8 \. J4 l' T( U

* w6 e, E0 d" _　　 〈/tr〉
4 S% U- P5 Z; J& F% {2 j/ Q6 M+ M, h2 b
　　 〈/table〉9 Z0 h  _: x5 J' }3 `: B- v
: h$ j7 W. k+ {+ T4 z6 ]; V
　　 〈/td〉
) P; d& F1 O! f% o6 U# _- @0 t! F& Q4 T. n* g3 f, n4 B( V1 E; |
　　 〈/tr〉3 c) ^+ [8 f3 u4 t* i% @
/ U3 {) c8 P7 L& R
　　 〈/table〉
' r$ h9 ~' w+ E& s# D% ^
& {$ q+ }" v, G1 M6 ~* N! T　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。: ?; h, P3 E- s0 l* Q; F, o0 ]

0 J0 d8 R% F; L8 _　　源代码如下：
2 Q# W  G" F9 j; P5 [4 T
' K( @8 b/ F) R( P　　〈table border="0" bgcolor=white〉
6 n: r9 ^! B* s! w
+ M; [( M4 U& m+ z/ i6 D　　 〈tr〉5 _$ a4 C+ H6 d6 \* C' t+ I. ?! m+ y

; `( w! G# S/ T　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
% N! |; U+ X; r. M& X- B- u" x! n- N9 B" |' j. N
　　 〈/td〉
3 Y! w/ x4 e# V6 H4 i: K
2 q1 w3 Y# J8 ?/ ^　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉. t+ }' E) a# i+ i2 `4 W2 W" v
  v$ ]' p& d* p+ p
　　 〈/td〉# j& F  p3 \0 H. f
  J( Z! K: S& U7 m2 A% S* M
　　 〈/tr〉
! M0 m2 ]  ~$ P8 @- Y5 [8 h
5 W- I/ n7 w; b) E　　 〈tr〉2 J3 W' b: k7 c+ ~+ d$ v

* g3 f, x+ M& e4 |0 y　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
7 U6 c# a: X3 N/ W
$ ?/ M9 U6 D/ m3 {4 V  M% m& G8 s5 L8 q　　 〈/td〉- e1 G8 c7 h. Q# E7 b0 W% n/ `
& x. _2 K3 O  u
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉0 ]0 F- z- h2 w2 `

! z5 N# b& i+ W. g# z( b0 k: o9 }  U
　　 〈/td〉
7 d9 B- ]: B/ f3 @: t
0 a% h! U" a5 P" [1 n0 K　　 〈/tr〉
$ ~! r5 ]" L% @4 i& a' p9 j, g/ G/ T3 D$ p
　　〈/table〉

晴天再现

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