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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
, C5 E8 \; j/ ~9 }　　: K7 k. l/ k2 x
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。! a  v# X& F+ \0 L0 F, w

# L' D  t. F6 N% j( |7 v/ N8 _  L　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
, u6 @6 ^0 e: A% ]+ i; d5 i- q: x/ I6 d; x. r
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
7 k" ]& @0 G) v; s1 h
7 o, |8 Y! m% O7 a　　 〈tr〉
$ G7 z) V' l4 q  [% b3 h
1 U3 I3 C$ O5 E' G5 U6 S　　 〈td〉
; o) ?+ H6 V+ m( L" W$ d
; F4 H3 Z4 h" b, c' E, ^　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉! ^2 S9 O5 h% L8 r" N
- i' Q- t+ I* e2 O5 w2 k  D1 k
　　 〈tr〉
# c4 m' U4 F, C- o" Z1 E
; v* S. F/ {5 c　　 〈td〉0 ~3 T: @% L' D: e$ ]3 V7 D* U
) `! m* y+ G& j" B# o
　　 〈/td〉
9 e8 d$ E% C0 T  B1 f$ ?$ e
% S3 f0 u2 Y# g9 [+ H- P　　 〈/tr〉# Z% j$ {: e! d- ~: d. G8 s

; p( ~+ k- c0 m' B/ P6 `　　 〈/table〉; C1 e. F. R2 H0 n* ~
$ W" \8 f7 w3 y6 \9 o  A8 n4 R
　　 〈/td〉
" [! [( [3 t, w& U" D5 X% i
1 ^( V$ N+ S2 ]5 u! n% [　　 〈/tr〉
  L6 o  M+ U  N5 K% o# N3 W1 v# T
3 w* I  f: ~% b4 X' H; y5 R  x4 p( b　　 〈/table〉
. o0 }( A8 ~6 i. p0 K: p5 C. w: Q) d' m3 p
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。, F3 v  `& d' M9 j. Z
) N7 p4 |4 U( H3 n
　　源代码如下：3 |5 F- u8 M( X4 Q  |
0 P' {7 i/ \* _( L
　　〈table border="0" bgcolor=white〉2 d* |# K1 e# E, u& U4 F
) \1 ~( m) V$ Y, N
　　 〈tr〉
! F$ G0 o8 ^4 L
) N+ w3 m* w. |# R　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
2 |9 }9 o# d! X! U, O4 p# D; o4 h$ h# X1 I' R0 n- _
　　 〈/td〉
: b/ h+ C" v4 Y3 A* z' f( k' {' W' Y, [
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉) d# n" J9 S" z, u+ s+ D
2 m9 j; s8 c) D5 X) u! T0 S
　　 〈/td〉
! F( W/ `" [) b% I& s1 O( [& }( S7 d+ A2 C
　　 〈/tr〉2 b% J7 J( y) z

; @- B7 h7 C  Y/ h% b  ?1 u　　 〈tr〉
; m+ U, q8 K4 x: }' Z6 v( x' G/ x9 U& _$ `8 F6 G
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
. I0 m3 S0 ?! E: s4 [- k
9 w: [  W# M  M* v$ f2 \　　 〈/td〉5 D+ R1 w* m; ^. T1 H

3 n3 `. A8 p( A% M　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
: M/ \8 `/ J" Z/ L( I2 G0 f/ ?7 r

. E) U6 G' j5 h3 K' T1 G# k　　 〈/td〉0 X% ?5 x, ]/ s" J1 ^/ Z  s4 a  J
. k0 v4 p6 C$ P. e0 y9 L& f
　　 〈/tr〉
4 }& P* H3 u2 h! O( S8 g8 `
2 Z1 U1 q2 H3 h　　〈/table〉

晴天再现

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