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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
7 T% F9 o* o: n　　7 m/ y9 Y! y. Q( h/ I
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。% k. n5 F. v  c( Z  ?; \3 a
6 v) f- R/ A5 r/ f8 H" c
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
0 O1 m8 |1 P9 `& L6 L; S
& `: m. p( y' s- V3 c, P/ N+ K　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉  r$ [0 o/ S" o, a; Q  t7 \& i7 @
3 B: T  O( w& c# }( l
　　 〈tr〉8 |" k8 O" W) e) [6 m) c. B, n( q, G
: F7 l: E) f6 X- ?& f8 E5 z& ]
　　 〈td〉0 o8 D1 c; f9 p! l+ _. u
+ N  z. t$ C  |/ m+ K' q
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉. x0 E$ [/ v6 M) o0 b

4 u8 e0 p! ?: I1 A8 [: I　　 〈tr〉/ D: G  g# _* u  \6 N

" h4 t; E- h' ?1 v2 C5 k　　 〈td〉
+ O8 a' p! ~) h& H' L1 z& [+ Y8 A/ x: o  s' i, s
　　 〈/td〉7 S! z+ Q+ v: B3 n$ ^. O( G: f
/ P- Z+ ~0 h& Z- N# ]
　　 〈/tr〉) C' o& |1 [: k# m

, i" p2 {0 R) q2 v: ?　　 〈/table〉
" t! K: Y+ X: ^# H' V
2 H' y. R7 L0 v6 O# Q/ e2 C$ \: x, ^　　 〈/td〉
; w* G+ [3 T3 R; e, F/ l  P$ b1 R: P( y( @! B0 r$ I
　　 〈/tr〉; O, G/ p! U7 U3 U
3 L, R! y; s1 J' b$ [" b
　　 〈/table〉: {- ~: ], t/ g9 O% U: Y' E/ r

5 D8 f* [3 y" G( {　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
+ ]7 Q% l! p4 Q6 B) f& D. F, d* u' m. x- Y% _/ b
　　源代码如下：
) t1 H0 m8 j8 g* l
3 ?: H4 G. Z! j& I　　〈table border="0" bgcolor=white〉, i( _5 y$ @( y4 W
' `( p: H0 O" e
　　 〈tr〉1 w4 p6 E. N! w  n) s4 x6 C
% |1 k7 S/ e7 s/ r
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
5 w+ J% T$ w+ i  e9 T# L& u' S, h9 h$ N; r
　　 〈/td〉* ^- H: c, `, D! |* O+ I- u; S( W
( W, H* M9 U0 ?3 [
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉8 Y( Y1 |' k' M% D: Y% f) F' F) Q
5 n$ L; e$ g: I# ?& `4 e
　　 〈/td〉1 i0 ^+ c7 Z9 j% m( A( S* V

+ ]! v/ c: Y7 p$ r　　 〈/tr〉
& Z) h, b. a0 a9 Z: q, q1 U( h2 K
5 x/ S$ L( H0 d$ s9 Z　　 〈tr〉9 J: }# J4 C% Y% d

+ H, Y- o5 x9 A( f$ e# J" J  V　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉4 j% H: u9 F0 J$ z+ `- ^
2 E8 m4 i0 V1 i3 W
　　 〈/td〉# b; `. k5 n7 ^/ V) M4 g
1 s) y$ @" Q# R3 Y
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
8 m' Z' o0 u5 @; D; ~  j7 ^" S
# i5 ?) l- g7 `4 e3 o
; B/ a  q& F3 w; q6 v. m　　 〈/td〉
6 b% K: v$ V* z, |8 w! C
, J  s5 L  H/ G4 L, s　　 〈/tr〉
7 r6 G8 j8 K( Q# T5 A8 m$ q" f# C$ s5 i" n  c
　　〈/table〉

晴天再现

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