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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
  U5 g) D0 }" ^2 o　　
& J. W  c- t5 ~/ ?6 ^; l　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
# Q( B8 u, r( N& A4 `* L$ i+ P4 b- s
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
8 C6 I) q9 b9 F8 m+ N% P6 T. t( I
' `; x3 w6 t0 q  c: \0 `　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
# w9 Q4 |1 X/ f  ]/ R) T/ D3 y) s5 y# ?( a% `: w# X4 I
　　 〈tr〉+ i4 w0 N4 R- P1 F" t+ C" v" u7 B

/ p" e' w4 L8 d! o! j/ Z' @　　 〈td〉6 x9 M9 t2 u( Z  H6 t# e
/ b1 n$ y# A9 E4 L
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉& F- j: _9 O) b+ ?/ ]% O% _0 j
) `* X; g4 X+ `' S; I
　　 〈tr〉
" ?+ _- E% ~7 y! M$ t4 L. a7 [) G6 _$ d# R" g
　　 〈td〉
- [+ I% b4 i. L9 X2 W( c4 Z% {- E9 J- a- o. b8 Q# z
　　 〈/td〉
4 {  B2 B( |' Q0 A- e
9 z# a9 ?9 Z3 B. Z* E- d# D- Y　　 〈/tr〉
: F5 h, t7 p) d0 ^  o+ j; ]+ k- N1 J1 z% E( B  k# s9 Z: ^, p, n
　　 〈/table〉3 T8 F/ M6 b( ?# o

" z- U4 u! }! ~$ |　　 〈/td〉5 \* O: i: K* H1 e9 _: Q' f2 ^
4 X, c, n6 I* U) Z* @
　　 〈/tr〉8 D9 R4 ]/ y- C4 X$ b- I

1 Y5 a/ ]9 C1 R8 i$ j　　 〈/table〉
8 m0 w/ C: q# r% B$ V, \2 P, Z5 r' _
+ l/ U' w+ q5 e, n" ?　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
" X/ I9 @$ j2 K8 ?6 m) D& e- c( i( z" c! c9 s
　　源代码如下：
5 ?8 D+ x, ^3 K2 ]" V5 k0 `, i3 \, M6 a8 V# q+ }2 _! p  h
　　〈table border="0" bgcolor=white〉
) B* C0 J+ K+ g9 }0 }
2 S3 V9 F! ~: h, C6 X9 j  F　　 〈tr〉
$ y; i0 G* K# [1 Y! H- o! _4 l" L1 E) A9 j! ?
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
8 D' I; E1 m1 l0 Q7 w/ R% g4 G/ b2 j5 a5 j
　　 〈/td〉8 |( \2 i0 V8 k! t4 F" _" ~
9 d; u1 B3 B( m5 @
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉  [: v3 v( y* d) g# F( G
' r) s7 N5 p, i( t- i
　　 〈/td〉9 O# c) `$ h( L7 v4 P
* Z$ m7 h7 _/ R! P; g$ A
　　 〈/tr〉3 D. v0 R5 G6 H. j; t* Y/ [
2 {6 u. J1 Y7 h; T
　　 〈tr〉
/ @; Z4 q9 `( S
4 \: S& ], K3 a+ q2 e　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
" o% }3 o6 Z  A* V, B5 r' i
3 B2 b2 y& C1 B% e. B　　 〈/td〉0 I5 {- X9 A9 p
: H7 Y% I3 E9 y$ `$ h; @
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
/ ^4 v5 a% e" c4 q; B& X
/ y9 g5 ^/ Z9 i& T7 p7 Y
' x5 z' g7 Q$ F7 O& u" w( L　　 〈/td〉9 ]/ M% A* N+ H6 ]9 g4 q+ m5 O' D

+ p1 l7 b1 Q4 N1 E6 C5 Z　　 〈/tr〉: R- [0 m5 L% I' D9 V

) V' q+ G. Z8 t+ U- q　　〈/table〉

晴天再现

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