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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。- x# q* k2 u% C9 u: R
　　5 B* q3 C/ E- K$ W# B
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
* l2 M+ f* E% _1 G" C+ X! K0 u3 o/ o, c  m$ Z' N0 B  [
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
$ P  _. @# l4 H0 P: Y4 |* r2 D$ D& q
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉+ ?0 d6 ]4 A) x8 U- Q

0 Q3 v* i1 q& R3 G　　 〈tr〉; [) e& s: _% b3 Y

6 s# O' n1 x6 W　　 〈td〉
9 q# b4 }! U+ f: f' Z' m/ h6 a* P8 z6 K
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉7 e/ W' ]) u" E7 v6 q1 B; H  H

4 x# X9 }4 \' M- W0 N" {　　 〈tr〉
1 l) G$ q9 \- u2 b9 w6 m
' I' [1 q& M* o8 j* ?% _. ~　　 〈td〉
# G( N: N  n& I; V+ C
  v# j2 O6 }. M& L+ ~" o) [　　 〈/td〉
7 f( ?5 `5 i/ E6 j3 K5 N6 [2 S. S
5 ]8 Q6 Y' N' W8 E* b7 w! ]* @3 w　　 〈/tr〉
$ v4 D+ l! g& {) I- t/ }3 [7 q4 y& Z6 N- ]( e$ D* P9 t
　　 〈/table〉
5 Q* D$ u' t9 ~: a" W+ C3 c7 Z
　　 〈/td〉$ E- Z; H5 v. H. D( t
5 e+ b# r, p+ r* F* D3 M6 J1 v
　　 〈/tr〉: c9 R  ?9 Y3 M$ d6 j
7 N. ^) O0 Q, f0 i, p- v
　　 〈/table〉
: [) B3 e6 f) ?- X6 K8 d9 V2 q; B" R7 }
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
- w! @! G9 M+ J( L- z' l8 _+ Y8 T
　　源代码如下：
& C% u# J. r$ ]* t  r
; D, k% c  c! c　　〈table border="0" bgcolor=white〉7 E5 [8 L6 b3 _
9 n4 a5 l, S9 \$ L. d& Q( _
　　 〈tr〉
* M3 P6 h( ?4 z! h$ S2 P. Y- X& m
/ L1 d6 n/ g5 E9 M; _# Y% s　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉. b$ f7 d/ G, b
6 a+ {* i0 z/ q, U2 b9 g. i! }  c. C
　　 〈/td〉
7 B7 {( s: W0 l/ s
4 w& X9 H, g3 [# M　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉2 J* H4 s6 ]& B0 g! H" B

* L* f+ G9 R5 a# H, I; Y  D　　 〈/td〉
: P3 L8 y# \3 V, F
6 q2 u+ |4 c* K$ F　　 〈/tr〉
' n" S* a/ i( i5 c" V6 Q( U/ J( L; q0 v, W
　　 〈tr〉* Z; @8 J9 }& i. ]* u
1 M& h; _8 \1 n1 U# z* K' Q
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉, L+ I- s8 e/ e5 ~* Y5 ]# v) h( }; a
( _7 H1 {$ ]4 b
　　 〈/td〉
! s5 S% X) X4 m4 b! _9 ^0 A! ~1 ~' c2 b4 f
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
; z5 S. W! J0 {3 r8 P- R; j4 ^* c1 D. `3 X2 \& v

' ^7 k/ e; @/ J+ w* _　　 〈/td〉
7 \, B( v& S& ?% j  W8 r6 e/ s$ s: E% v2 ], W8 i' H# n
　　 〈/tr〉
1 O0 L9 u- P$ S! @- q5 y
1 e# |" C% n" L7 p　　〈/table〉

晴天再现

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