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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
# T: Z1 N+ u3 I　　+ T% b8 y3 v0 R3 R% k( v6 x% ?7 t
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
* E# X0 x# ^, N: A
  Q+ Y# w7 y) G0 a' J　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
' d# X  n) H& a& N7 O" m9 B# l' Y! Y/ k) Z! U. ^& P
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉: O9 Z0 f0 I9 Q

1 w: _! @7 I5 I. D1 T  f, d/ `; U　　 〈tr〉1 ]+ H& V" R% r1 m5 h6 `9 s0 s
1 r' j9 q2 A  S0 }& E
　　 〈td〉
* F! g" j" h+ A( p- }, |( k1 w
+ T5 w+ m: h! \7 a; J: n　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
# K  S/ A6 w5 p, s
, Y& H! k! N( o2 V/ b7 N　　 〈tr〉4 q5 @# B) h* C! x, s, e
1 d' p' b! }0 K
　　 〈td〉
: d$ f5 A; P' B6 n/ s& J' X( @  `8 f
　　 〈/td〉: d/ P* d& o* ]
  V# g- J# p" |% t, n
　　 〈/tr〉
. \5 Y) ~) w  I$ A$ A4 C0 j
9 a- T8 {/ i$ h# h3 @5 {# `　　 〈/table〉8 `# y; z3 @9 r. V5 y* @% O
" E6 ]* X  b! k# \  W( ?
　　 〈/td〉, X3 F- D( i# Z) ]/ K) p

! @" q) I  W8 k4 o; A4 x2 D6 g　　 〈/tr〉
2 H$ ~: S5 B) s- F5 o4 U2 b  A* A; b
　　 〈/table〉
# S/ X# e  w# H) D  u/ t4 F! n7 e* \0 v5 \! o
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
/ t$ Z) n9 `4 D5 d6 L" o# k0 y  D7 R" v2 ?* [2 s3 n
　　源代码如下：
5 B, Y, I7 t. w' j2 i0 i7 T+ x, ?! k; I' {% ?! H
　　〈table border="0" bgcolor=white〉9 h0 F7 @6 \2 A  P9 G; t1 a

( D6 _0 Q. p4 d5 t* o+ n9 u　　 〈tr〉
3 W7 y( j) G, k5 D
% m3 ?' x- }6 B# ^: l. t# _; `% g　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
/ J8 k4 [+ Y/ w2 ~# m6 }9 p, o: V1 z$ q
　　 〈/td〉- l5 M, a1 n+ m" o1 `6 m
) B9 f; l$ Y/ g/ C0 B$ q' K
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉- j; i, c5 B6 \% s

) k2 K' C+ a$ m- K　　 〈/td〉4 D+ t6 @- W0 U' M8 ]/ v8 ?  L
% d4 `' ]# U4 l8 ~  N9 ]
　　 〈/tr〉
( T6 a* S8 T4 N* C, W
. q$ ~, D- L2 w; D: W6 k; d% p　　 〈tr〉
$ @( B" Z& u: _/ H* \
0 l5 W# m; `0 G; b1 G" s6 B　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
: k; B- u$ j- D. s" R! j
+ a: t& [  i6 K( h　　 〈/td〉$ Q* b6 G) k" R7 H; H  z
- u9 P6 ^: T4 X) |
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
. x* ~0 S0 s9 {- K3 B# i& B1 O  [  x

; |7 Z4 X9 N6 T- x  c9 p4 |　　 〈/td〉' Y7 D7 F( ^( I

$ @7 V! e; S: R7 ~* `　　 〈/tr〉
. v6 S3 P0 G& t' n+ y1 o/ a' L3 v- c3 e5 O% p, q$ Z" V. T
　　〈/table〉

晴天再现

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